Vite 性能优化

项目能跑之后，下一步是让它跑得更快、体积更小。这一篇我们从开发和生产两个维度，给出可落地的优化手段。

开发环境优化

调优依赖预构建

Vite 会自动分析并预构建依赖，但有些场景需要你手动干预。如果某些依赖没被自动发现（比如通过变量动态引入的），可以显式声明：

export default defineConfig({
  optimizeDeps: {
    include: ['lodash-es', 'some-lib']
  }
})

反之，如果某个依赖已经是 ESM 且不需要预构建，可以用 exclude 跳过，省去不必要的处理：

export default defineConfig({
  optimizeDeps: {
    exclude: ['pkg-that-is-already-esm']
  }
})

改了这些配置后，记得重启开发服务器，并删除 node_modules/.vite 缓存让其重新生成。

避免插件拖累

插件越多，每个文件的转换开销越大。只保留必要的插件，自定义插件里避免在 transform 做重计算。调试时可用 vite-plugin-inspect 看哪个插件最耗时。

生产环境优化

代码分割 manualChunks

默认 Rollup 会把代码打成一个大 bundle。把不常变的第三方库拆出来，能让浏览器更好缓存。在 rollupOptions 里配置：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue'],
          vendor: ['axios', 'lodash-es']
        }
      }
    }
  }
})

这样 vue 和常用库会被单独打包，业务代码更新时它们不用重新下载。

Tree Shaking

Tree Shaking 指打包时自动剔除没被用到的导出。它依赖 ES Module 的静态结构，所以请始终用 import / export，避免用 CommonJS 的动态写法。Vite 在生产构建默认开启，你只要保证代码是纯 ESM、没有副作用误判即可。

动态导入与懒加载

对不立即需要的模块用动态 import()，Vite 会自动把它拆成独立 chunk，只有用到时才加载：

button.onclick = async () => {
  const { heavyCalc } = await import('./heavy.js')
  heavyCalc()
}

路由层面也常用这个思路，配合框架的懒加载，首屏只加载当前页需要的代码。

用可视化工具分析体积

装上 vite-plugin-visualizer 能生成依赖体积图，直观看到是谁占了空间：

npm install -D vite-plugin-visualizer

import { visualizer } from 'vite-plugin-visualizer'

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

构建后会产出 stats.html，打开就能看到每个模块的体积占比，针对性优化。

常见瓶颈定位

首屏慢，先看是不是单个 bundle 过大，用代码分割解决。
开发启动慢，检查依赖预构建和插件数量。
图片多导致体积大，用前面讲的资源内联阈值和压缩处理。
线上报错难定位，按需开启 sourcemap。

本篇小结

开发期调 optimizeDeps.include/exclude，删缓存后重启。
生产期用 manualChunks 拆库、用动态 import 懒加载。
坚持 ESM 写法才能享受 Tree Shaking。
vite-plugin-visualizer 帮你量化优化方向。

下一篇我们学习库模式，用 Vite 打包一个可复用的组件库。

Vite 与 TypeScript

Vite 库模式