生产构建

vite build 使用 Rollup 打包并应用内置优化。开发阶段原理见工作原理。

下面从 Rollup 配置透传、目标环境、代码分割、资源与压缩等方面说明。

一、构建命令 `vite build` 背后的 Rollup 打包

当执行 vite build 时，Vite 会：

解析用户配置（vite.config.js）。
调用 rollup.rollup() 创建 Rollup 构建。
应用内置插件（如 @vitejs/plugin-vue、@vitejs/plugin-react 等）。
合并 build.rollupOptions 中的 Rollup 配置。
输出优化的产物到 dist 目录。

关键点：Vite 的 build 命令完全基于 Rollup，因此大部分 Rollup 插件和配置选项都可以直接使用。

透传 Rollup 配置：`build.rollupOptions`

你可以在 vite.config.js 中通过 build.rollupOptions 直接传递 Rollup 配置：

export default {
  build: {
    rollupOptions: {
      input: 'src/main.js',           // 多入口时使用
      output: {
        dir: 'dist',
        format: 'es',
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]',
        manualChunks: { ... },        // 自定义代码分割
      },
      external: ['lodash'],           // 排除某些依赖不打包
    },
  },
};

`build.target` 指定浏览器兼容目标

build.target 用于设置最终打包代码的浏览器兼容目标。Vite 7 起默认值已改为 'baseline-widely-available'（对应 Chrome/Edge ≥111、Firefox ≥114、Safari ≥16.4 等，跟随 Baseline 标准逐年更新；Vite 5/6 时代默认值为已废弃的 'modules'）。你也可以设置为具体的版本如 'es2015'、'es2020'，或浏览器目标如 'chrome87'。

export default {
  build: {
    target: "es2015", // 转译到 ES5 级别（更广兼容，但体积稍大）
  },
};

需要注意的是，降低 target 会增加 polyfill 和转译代码的体积，因此建议在用户群体允许的情况下保持较高目标。

二、代码分割策略

Vite 默认会根据动态导入（import()）自动进行代码分割，也可以通过 manualChunks 进行更精细的控制。

1. `build.rollupOptions.output.manualChunks` 自定义拆分

你可以提供一个函数，根据模块路径返回 chunk 名称，从而将特定模块分组。

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            // 将 node_modules 中的模块按包名拆分
            const pkgName = id.match(/node_modules\/(@[^/]+\/[^/]+|[^/]+)/)?.[1];
            if (pkgName) return `vendor-${pkgName.replace("@", "")}`;
            return "vendor";
          }
          // 可以将业务公共模块提取
          if (id.includes("src/common/utils")) return "utils";
        },
      },
    },
  },
};

2. 动态导入自动分割 chunk

任何动态 import() 语句都会自动生成一个独立的异步 chunk，这是最自然的代码分割方式。

// 路由懒加载
const UserPage = () => import("./pages/UserPage.vue");

Vite 会为 UserPage.vue 及其依赖的模块单独打包为一个 chunk，在需要时加载。

3. 第三方库自动分割为独立 vendor chunk

Vite 内置了一个简单的 vendor 分割策略：如果某个模块来自 node_modules 且被多个入口引用（或体积大于一定阈值），会被自动提取到 vendor.[hash].js 中。你也可以通过 manualChunks 定制更精细的 vendor 策略，例如按包名拆分。

三、Tree Shaking 与 sideEffects

Vite 在生产模式下默认启用 Tree Shaking，依赖 Rollup 基于 ESM 静态分析的能力。

确保库正确配置 `sideEffects: false`

sideEffects: false 告诉打包工具该包的所有模块都没有副作用（即只导出功能，不会在导入时执行额外代码），可以安全地剔除未使用的导出。许多主流库（如 lodash-es、vue）已在 package.json 中正确配置。

如果你的项目中有自定义模块但无副作用，也应在 package.json 中设置：

json

{
  "name": "my-lib",
  "sideEffects": false
}

如果某些文件有副作用（如 polyfill、全局样式），则需要显式标记：

json

{
  "sideEffects": ["./src/polyfill.js", "*.css"]
}

注意：Vite 在生产构建时，Rollup 会读取 package.json 中的 sideEffects 字段。若要强制保留某些模块，可通过 treeshake.moduleSideEffects 选项覆盖。

四、资源处理

1. 静态资源内联阈值 `build.assetsInlineLimit`

默认小于 4KB（4096 字节）的静态资源（图片、字体等）会被内联为 base64。你可以通过以下方式修改：

export default {
  build: {
    assetsInlineLimit: 8192, // 改为 8KB
  },
};

内联的好处：减少 HTTP 请求。
缺点：增加 bundle 体积，且内联资源无法被浏览器缓存。

2. 资源文件命名 `build.assetsDir` 与 `build.rollupOptions.output.assetFileNames`

build.assetsDir：指定静态资源输出的子目录，默认为 assets。
assetFileNames：更精细地控制资源文件名，支持 [name]、[hash]、[ext] 占位符。

export default {
  build: {
    assetsDir: "static",
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith(".png")) {
            return "images/[name]-[hash][ext]";
          }
          return "assets/[name]-[hash][ext]";
        },
      },
    },
  },
};

3. 大资源输出为独立文件

对于超过 assetsInlineLimit 的资源，Vite 会自动输出为独立文件，并在 JavaScript 中生成 import.meta.glob 或 new URL 引用路径。无需额外配置。

五、CSS 优化

1. 提取 CSS 到单独文件 `build.cssCodeSplit`

默认情况下，Vite 会为每个异步 chunk 生成对应的 CSS 文件（cssCodeSplit: true）。如果设置为 false，所有 CSS 会被合并到一个文件中。

export default {
  build: {
    cssCodeSplit: false, // 关闭 CSS 代码分割，合并成单个 CSS 文件
  },
};

合并有助于减少请求数量，但可能增加单文件体积，需要权衡。

2. CSS 压缩 `build.cssMinify`

Vite 7 起默认使用 Lightning CSS 进行 CSS 压缩（build.cssMinify 默认值为 'lightningcss'；早期版本默认 'esbuild'）。可显式切换为 esbuild（需额外安装 esbuild 作为 devDependency）：

export default {
  build: {
    cssMinify: "lightningcss", // 默认；可选 'esbuild' 或 false
  },
};

lightningcss（Rust 实现）压缩率与速度均有优势；esbuild 仍是常见的历史备选项。

3. 预处理器（SCSS/Less）全局变量注入

通过 css.preprocessorOptions 可以向所有预处理器文件注入全局变量或 mixin：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$primary-color: #42b983; @import "@/styles/mixins.scss";`,
      },
      less: {
        modifyVars: { "primary-color": "#42b983" },
        javascriptEnabled: true,
      },
    },
  },
};

注意：additionalData 会在每个 SCSS 文件开头注入内容，可能影响构建性能，应避免注入过多代码。

六、压缩混淆

`build.minify` 选项

Vite 支持两种压缩混淆器：esbuild（默认，速度极快）和 terser（更彻底，但慢）。可通过以下方式配置：

export default {
  build: {
    minify: "terser", // 或 'esbuild'
    terserOptions: {
      // 仅当 minify: 'terser' 时生效
      compress: {
        drop_console: true, // 移除 console.log
        drop_debugger: true,
      },
    },
  },
};

esbuild：压缩速度快，适合开发或 CI 环境，压缩率略低于 terser。
terser：压缩率稍高，能移除更多无用代码（如未使用的函数），但构建时间更长。

对于大多数项目，esbuild 已足够；如果对体积极度敏感（如移动端 H5），可选择 terser。

七、构建分析

分析产物大小是优化的重要环节。

1. 使用 `rollup-plugin-visualizer`

安装插件，并在 vite.config.js 中配置：

bash

npm install -D rollup-plugin-visualizer

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

export default {
  plugins: [
    visualizer({
      filename: "dist/stats.html", // 输出分析报告
      open: true, // 构建后自动打开
      gzipSize: true, // 显示 gzip 后大小
    }),
  ],
};

执行 vite build 后，会在 dist 目录生成一个交互式 HTML 报告，直观展示各模块体积占比。

2. 使用 `build.reportCompressedSize`

Vite 默认会输出 gzip 压缩后的尺寸（在终端显示）。如果希望关闭此计算以加速构建，可以设置：

export default {
  build: {
    reportCompressedSize: false, // 不计算 gzip 大小，加快构建速度
  },
};

此外，你还可以使用 vite build --mode analysis 配合环境变量来动态启用可视化分析。

总结

优化方面	关键配置 / 技术
构建基础	`build.rollupOptions` 透传 Rollup 配置；`build.target` 控制兼容性
代码分割	`manualChunks` 自定义分组；动态 `import()` 自动分割；第三方库 vendor 分离
Tree Shaking	依赖 `sideEffects: false`；Rollup 默认启用
资源处理	`assetsInlineLimit` 内联阈值；`assetFileNames` 自定义命名
CSS 优化	`cssCodeSplit` 控制是否合并；`cssMinify` 压缩；`preprocessorOptions` 注入
压缩混淆	`minify: 'esbuild'/'terser'`；`terserOptions.drop_console` 等
构建分析	`rollup-plugin-visualizer` 生成体积报告；`reportCompressedSize` 控制

通过合理配置上述选项，可以显著减少生产产物体积、提升加载性能，同时维持良好的开发体验。

参考文献

以下链接在编写时均可正常访问：

资料	说明
Vite：构建生产版本	官方
Rollup 配置	output / manualChunks
部署静态站点	部署