在 Vite 中做构建性能分析，核心是用 rollup-plugin-visualizer 生成可视化报告，直观看到每个模块的体积占比、依赖关系和压缩后大小；它不改变构建逻辑，只提供诊断依据，是优化前必走的一步。
在 Vite 中做构建性能分析，核心是用 rollup-plugin-visualizer 生成可视化报告，直观看到每个模块的体积占比、依赖关系和压缩后大小。它不改变构建逻辑，只提供诊断依据，是优化前必走的一步。
安装并启用可视化插件
先安装插件：
npm install rollup-plugin-visualizer -D
然后在 vite.config.ts 或 vite.config.js 的插件数组中加入配置：
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
// 其他插件...
visualizer({
open: true, // 构建完成后自动在浏览器打开报告
filename: 'stats.html', // 输出文件名（默认在 dist 目录下）
gzipSize: true, // 显示 gzip 压缩后体积
brotliSize: true // 显示更高效的 brotli 压缩后体积
})
]
})
运行 npm run build 后，会在 dist/stats.html 生成交互式饼图与树状图，点击模块可下钻查看具体文件路径和大小。
立即学习“Java免费学习笔记（深入）”；
只在生产环境启用（推荐）
避免开发时冗余打包，可用条件判断控制启用时机：
plugins: [
// ...其他插件
process.env.NODE_ENV === 'production' && visualizer({
open: true,
filename: 'analysis/stats.html',
template: 'treemap', // 可选 'sunburst' 或 'network'
gzipSize: true
})
]
这样既节省 dev 构建时间，又确保每次上线前都能拿到最新体积快照。
结合手动分块定位大依赖
光看体积还不够，要配合 manualChunks 拆分策略快速验证哪些包最“重”：
- 在
build.rollupOptions.output.manualChunks中按需拆出vue、lodash-es、echarts等大依赖 - 再跑一次构建 + visualizer，对比各 chunk 大小变化
- 若某个 chunk 占比异常高（比如超过 1MB），就重点检查是否误引了全量包（如
import _ from 'lodash'应改为import { debounce } from 'lodash-es'）
补充：查看真实网络加载表现
打包报告反映的是静态体积，但实际加载还受资源类型、HTTP/2、缓存策略影响。建议：
- 用 Chrome DevTools 的 Network 面板，勾选 “Disable cache”，刷新页面，观察各 JS/CSS 文件的 size 和 content download 时间
- 检查是否有未压缩的第三方脚本（如直接引入 CDN 的未压缩版 Vue）
- 确认
Content-Encoding: br或gzip是否生效（服务端需支持）
