Vite 的打包优化 • 多吃点的小饭桌

分析打包产物

安装 rollup-plugin-visualizer

npm install rollup-plugin-visualizer -D

配置插件

在 vite.config.js 中引入，仅在生产环境启用：

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

const plugins = [];

if (process.env.NODE_ENV === "production") {
  plugins.push(
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
    }),
  );
}

执行 npm run build 后，浏览器会自动打开可视化报告。

优化前

可以看到右侧有一个体积异常大的 chunk，大量第三方依赖被打包到了一起，首屏加载压力较大。

优化方案

手动分包（manualChunks）

将体积较大的第三方库拆分为独立 chunk，利用浏览器缓存减少重复加载：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["vue", "vue-router", "pinia"],
          charts: ["echarts"],
          utils: ["lodash-es", "dayjs"],
        },
      },
    },
  },
};

按需引入

避免整包导入，只引入实际用到的模块：

// ❌ 整包引入，体积大
import _ from "lodash";

// ✅ 按需引入
import { debounce, throttle } from "lodash-es";

优化后

经过以上调整，初始 chunk 体积显著减小，大型依赖被拆分到独立文件，后续访问可命中浏览器缓存。