Vite 前端构建优化：让打包快起来、体积瘦下来

一、先搞清楚构建走的是哪里

Vite 开发时偷懒用了浏览器原生 ESM，所以秒开；但 vite build 真正打包是交给 Rollup 的。也就是说，优化构建本质上是优化 Rollup 配置，外加 Vite 在它外面套的几层。

二、依赖预构建，别让第三方库拖死首屏

node_modules 里很多包还是 CommonJS，或者内部一堆小文件。Vite 默认会对它们做预构建（转 ESM + 合并），但有些大库得手动声明：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          echarts: ['echarts'],
        },
      },
    },
  },
};

把不常变的库（框架、图表）单独切出去，用户二次访问就能走缓存，不用每次重新下载业务代码。

三、压缩：gzip 还是 brotli

服务器开启了压缩，构建侧也可以先压好。Vite 自带 build.minify（用 esbuild，很快），再上 vite-plugin-compression：

import compress from 'vite-plugin-compression';

export default {
  plugins: [compress({ algorithm: 'brotliCompress' })],
};

brotli 一般比 gzip 再小 15%~20%，前提是你的 CDN/Nginx 支持。不支持就老老实实 gzip。

四、用可视化插件看体积大头

凭感觉优化容易白忙活。上 rollup-plugin-visualizer 生成一张treemap，哪个依赖占了多少一眼看清：

import { visualizer } from 'rollup-plugin-visualizer';

export default { plugins: [visualizer({ open: true, gzipSize: true })] };

五、几个值的对比

我一个中型后台项目调前后的变化：

六、别过度优化

不是所有项目都值得折腾分包。小项目一把梭反而简单。等首屏真的慢了、用户真的 complain 了，再上工具看数据调整。