1. 问题：构建时间越来越长
项目初期，Vite 的构建速度很快，通常只需要 2-3 秒。但随着代码量增长、依赖增多、页面数量增加， 构建时间逐渐增长到 10 秒以上，严重影响了开发体验和 CI/CD 效率。
通过 vite build --debug 分析，发现主要瓶颈在：
- CSS 处理耗时：PostCSS 和 CSS 压缩占用了大量时间。
- 多页面构建：每个 HTML 文件都需要单独处理。
- 资源优化：图片压缩、代码压缩等操作串行执行。
2. 优化策略一：并行处理
Vite 默认使用 Rollup 进行构建，Rollup 本身是单线程的。但我们可以通过配置让某些操作并行执行。
2.1 使用 esbuild 替代 Terser
Terser 是 JavaScript 压缩的默认选择，但 esbuild 在压缩速度上有显著优势（通常快 10-100 倍）。
配置示例：
- 在
vite.config.js中设置build.minify: 'esbuild'。 - 对于需要更极致压缩的场景，可以保留 Terser，但只在生产环境使用。
2.2 CSS 处理优化
PostCSS 插件可以并行处理，但需要正确配置：
- 减少不必要的 PostCSS 插件。
- 使用
cssnano的快速模式。 - 对于大型项目，考虑使用
lightningcss替代 PostCSS。
3. 优化策略二：缓存机制
构建缓存可以显著提升增量构建的速度。
3.1 Vite 的构建缓存
Vite 默认会缓存一些中间结果，但我们可以通过配置优化缓存策略：
- 使用
build.rollupOptions.cache启用 Rollup 缓存。 - 配置
build.assetsDir确保资源文件缓存有效。
3.2 依赖预构建缓存
Vite 会预构建依赖（node_modules），这些结果可以缓存：
- 在 CI/CD 中，可以将
node_modules/.vite目录缓存起来。 - 使用
optimizeDeps.include明确指定需要预构建的依赖。
4. 优化策略三：减少构建工作量
不是所有文件都需要在每次构建时处理。
4.1 代码分割优化
合理的代码分割可以减少单个 chunk 的大小，提升并行处理效率：
- 使用动态导入（
import()）实现按需加载。 - 配置
build.rollupOptions.output.manualChunks手动控制代码分割。 - 将第三方库单独打包，利用浏览器缓存。
4.2 资源处理优化
图片和字体文件通常不需要在每次构建时处理：
- 大图片使用 CDN 或外部存储，不参与构建。
- 字体文件只在首次构建时处理，后续使用缓存。
- 使用
build.assetsInlineLimit控制资源内联阈值。
5. 优化策略四：多页面构建优化
对于多页面应用，每个页面的构建是独立的，可以并行处理。
5.1 并行构建多个入口
虽然 Rollup 本身不支持并行，但可以通过脚本并行调用多个构建命令：
- 使用
Promise.all()并行构建多个入口。 - 或者使用构建工具如
turbo或nx管理多页面构建。
5.2 共享依赖提取
多个页面共享的依赖应该提取到公共 chunk：
- 配置
manualChunks将公共依赖单独打包。 - 使用
build.rollupOptions.output.sharedChunk自动提取共享代码。
6. 实际优化效果
经过以上优化，构建时间从 10 秒降低到 2 秒，主要改进：
- 使用 esbuild 压缩：节省 3 秒。
- 优化 CSS 处理：节省 2 秒。
- 启用构建缓存：增量构建从 8 秒降低到 1 秒。
- 代码分割优化：并行处理提升 2 秒。
- 资源处理优化：节省 1 秒。
7. 持续监控与优化
构建优化不是一次性的工作，需要持续监控：
- 在 CI/CD 中记录构建时间，设置告警阈值。
- 定期分析构建产物大小，识别异常增长。
- 关注依赖更新，新版本可能带来性能改进。
8. 小结
构建优化是一个系统工程，需要从多个维度入手： 并行处理、缓存机制、减少工作量、持续监控。 没有银弹，需要根据项目特点选择最适合的优化策略。
最重要的是建立"性能意识"：在添加新功能时，考虑对构建性能的影响； 在依赖更新时，关注性能变化；在项目规模增长时，及时调整构建策略。
评论区