依赖预构建的优化配置

性能优化 依赖预构建的优化配置

Vite 的依赖预构建是提升开发和生产环境性能的关键机制。它通过将 CommonJS/UMD 依赖转换为 ESM 格式并合并多个小文件来显著减少请求数量。合理配置预构建能进一步优化构建速度和运行效率。

预构建的基本原理

当首次启动 Vite 开发服务器时，会自动扫描项目依赖并进行预构建。这个过程主要完成两个任务：

1. 将非 ESM 格式的依赖转换为 ESM
2. 合并多个小文件以减少浏览器请求数量

预构建结果默认存储在 node_modules/.vite 目录中。可以通过配置修改这个行为：

// vite.config.js
export default defineConfig({
  cacheDir: './.vite_cache', // 修改预构建缓存目录
})

手动指定需要预构建的依赖

默认情况下，Vite 会自动检测需要预构建的依赖，但有时需要手动指定：

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    include: [
      'lodash-es',
      'vue',
      'axios',
      'my-custom-dep' // 强制包含自定义依赖
    ],
    exclude: [
      'vue-demi' // 排除不需要预构建的依赖
    ]
  }
})

预构建的缓存控制

合理配置缓存能显著提升开发体验：

export default defineConfig({
  optimizeDeps: {
    // 强制重新构建依赖（开发环境）
    force: process.env.NODE_ENV === 'development',
    
    // 禁用文件系统缓存
    cacheFilePath: false,
    
    // 自定义缓存失效策略
    cacheKey: `${process.env.NODE_ENV}-${Date.now()}`
  }
})

高级优化技巧

依赖预加载

export default defineConfig({
  optimizeDeps: {
    needsInterop: [
      'react-dom/server' // 需要特殊处理的依赖
    ],
    esbuildOptions: {
      // ESBuild 配置选项
      target: 'es2020',
      plugins: [
        // 自定义 ESBuild 插件
      ]
    }
  }
})

多页面应用优化

对于多页面应用，可以按页面拆分预构建：

export default defineConfig({
  optimizeDeps: {
    entries: [
      'src/main.js',
      'src/admin/main.js',
      'src/user/main.js'
    ]
  }
})

生产环境特定配置

生产环境构建时可以调整预构建策略：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

调试预构建问题

当遇到预构建问题时，可以通过以下方式调试：

1. 添加 --debug 标志运行 Vite
2. 检查 .vite 目录中的元数据文件
3. 使用 vite-plugin-inspect 插件

// vite.config.js
import inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [inspect()]
})

自定义预构建行为

对于特殊需求，可以完全自定义预构建流程：

export default defineConfig({
  async config() {
    const { scanImports } = await import('vite')
    const deps = await scanImports('src/main.js')
    
    return {
      optimizeDeps: {
        include: [...deps, 'extra-dep']
      }
    }
  }
})

性能指标监控

集成性能监控工具来评估预构建效果：

// vite.config.js
export default defineConfig({
  plugins: [
    {
      name: 'performance-metrics',
      configResolved(config) {
        if (config.command === 'serve') {
          process.env.PERF_METRICS = 'true'
        }
      }
    }
  ]
})

与其他构建工具集成

当项目中使用混合构建工具时，确保预构建兼容：

export default defineConfig({
  optimizeDeps: {
    disabled: false,
    // 与 Webpack 等工具共存
    holdUntilCrawlEnd: true
  }
})

处理特殊依赖情况

某些依赖可能需要特殊处理：

export default defineConfig({
  optimizeDeps: {
    extensions: ['.special'],
    esbuildOptions: {
      loader: {
        '.special': 'jsx'
      }
    }
  }
})