乐闻世界logo
5月31日 16:17

Vite 构建慢该从哪些地方优化？

Vite 性能优化先别急着堆配置，先判断慢在哪里：冷启动、页面首次加载、HMR，还是生产构建。Vite 开发环境用原生 ESM 按需转换，生产构建走 Rollup，两条链路的瓶颈不一样。把 Webpack 时代的“全量调参”直接搬过来，常见结果是配置变复杂，速度没明显提升。

先定位瓶颈

开发阶段优先看依赖预构建是否反复执行、插件 transform 是否过重、浏览器请求是否太碎。生产阶段重点看 source map、压缩器、大依赖和 chunk 策略。可以先用调试日志和产物分析确认问题，而不是凭感觉改配置。

bash
pnpm vite --debug
pnpm build

依赖预构建怎么配

optimizeDeps 主要影响 dev server。对导入链复杂、CommonJS 包或请求特别碎的依赖，可以显式 include；对本地源码包、需要保留模块结构的包，再考虑 exclude。盲目排除大依赖会让浏览器请求暴增，启动看似快了，页面反而更慢。

ts
export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'axios'],
    exclude: ['@my-org/source-lib']
  }
})

构建优化看分包和压缩

manualChunks 不适合一刀切。稳定的大依赖可以单独拆，编辑器、图表、富文本这类低频模块适合动态导入。压缩默认用 esbuild 通常够快；只有确实需要更细压缩规则时，再换 terser。

ts
export default defineConfig({
  build: {
    sourcemap: false,
    minify: 'esbuild',
    rollupOptions: {
      output: { manualChunks: { react: ['react', 'react-dom'] } }
    }
  }
})

插件也要按环境启用。图片压缩、可视化分析、Markdown 转换这类插件如果每次开发都跑，很容易拖慢 HMR。静态资源方面，assetsInlineLimit 不是越大越好，大图内联会撑大 JS 或 CSS，影响缓存。

追问

为什么 Vite 开发快，构建仍然可能慢？

开发环境不做全量打包，只按浏览器请求转换模块，所以反馈很快。生产构建仍要完整分析依赖图、tree-shaking、分包和压缩，大项目自然会慢。这里的取舍是开发体验和产物质量不能用同一套机制解决。常见坑是误以为 dev 快就代表 build 一定快。

manualChunks 应该怎么拆？

优先按访问频率和缓存收益拆，而不是按库名机械拆。React、Vue 这类稳定核心依赖适合单独 chunk，低频页面依赖更适合懒加载。拆太细会增加请求调度成本，拆太粗会拖慢首屏。边界是首屏必须用的代码不要为了分包好看强行拆远。

要不要把大依赖放 CDN？

CDN 外部化能减小包体，也可能利用公共缓存。代价是运行时依赖外部服务，版本、可用性和内网访问都要兜底。官网或活动页可以考虑，后台系统和离线部署通常不适合。常见坑是本地构建正常，线上 CDN 被拦截导致白屏。

source map 关掉是不是一定更好？

关闭 source map 能缩短构建并减少产物体积，但线上排错会变难。更合理的是普通生产包关闭，灰度或错误监控单独上传 source map。取舍点是速度、源码安全和问题定位效率。不要把 source map 直接公开到静态目录。

HMR 慢时先查什么？

先查改动是否牵连全局入口、统一导出文件或巨大的状态模块。再查插件是否每次 transform 都做同步 IO 或全量扫描。Vite 本身 HMR 通常很快，慢多半来自项目结构和插件副作用。monorepo 里还要明确 watch 范围。

标签：Vite