构建配置与产物分析
约 507 字大约 2 分钟
2026-02-25
这一章关注两件事：
- 产物“如何被构建出来”（配置层）
- 产物“为什么会变大/变慢”（分析层）
构建配置核心思路
build 的本质是把“线上运行约束”写进配置：兼容目标、产物目录、分包策略、调试信息。
| 配置项 | 作用 | 建议 |
|---|---|---|
build.target | 语法输出目标 | 依据浏览器兼容矩阵设定 |
build.outDir | 构建输出目录 | 与部署目录保持一致 |
build.sourcemap | 调试映射 | 生产推荐 hidden 或关闭 |
build.cssCodeSplit | CSS 分包策略 | 多页面/异步场景建议开启 |
build.reportCompressedSize | gzip/brotli 体积计算 | CI 场景可关闭以提速 |
build.rollupOptions | 深度产物控制 | 手动分包、多入口、external |
一份可落地的构建基线
import { defineConfig } from 'vite'
export default defineConfig({
build: {
target: 'es2018',
outDir: 'dist',
sourcemap: 'hidden',
cssCodeSplit: true,
reportCompressedSize: false,
chunkSizeWarningLimit: 1000,
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia'],
},
},
},
},
})产物分析怎么做
只看 dist 目录大小不够。你要看的是：
- 哪些依赖被打进首屏 chunk
- 哪些 chunk 重复引用率高
- 哪些资源本应 external 却被打包
使用 visualizer 看依赖图
安装
pnpm add -D rollup-plugin-visualizervite.config.ts
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
visualizer({
filename: 'dist/stats.html',
open: false,
gzipSize: true,
brotliSize: true,
}),
],
})执行
pnpm vite build
# 然后打开 dist/stats.html典型优化路径
- 先打开可视化报告，确认体积大户。
- 判断是否可
external或拆分到异步加载。 - 检查是否有重复依赖实例（尤其 monorepo）。
- 验证改动后首屏时间与缓存命中率。
常见问题
为什么分了 manualChunks 但首屏还是大？
常见原因：
- 首屏入口直接 import 了大 chunk。
- 动态 import 被静态引用链拉回主包。
- 样式或资源文件仍在主 chunk 同步加载。
sourcemap 该怎么选？
- 内部排障优先：
hidden。 - 本地调试：
true。 - 对体积和源码暴露敏感：生产关闭。