Vite 项目中可用 rollup-plugin-visualizer 生成交互式打包体积分析图以定位大依赖、重复模块或未 Tree Shaking 代码；安装后在 vite.config.ts 中配置插件，构建时自动生成 stats.html 可视化报告，并支持多种优化与进阶分析技巧。
在 Vite 项目中，用 rollup-plugin-visualizer（常简称为 Visualizer）可生成直观的交互式打包体积分析图，帮你快速定位大依赖、重复模块或未被 Tree Shaking 的代码。
1. 安装并注册插件
先安装插件：
npm install -D rollup-plugin-visualizer然后在 vite.config.ts（或 .js）中引入并配置：
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
// 其他插件...
visualizer({
open: true, // 构建后自动打开分析页面
filename: 'stats.html', // 输出 HTML 文件名（默认）
gzipSize: true, // 显示 gzip 后大小（更贴近实际网络传输）
template: 'sunburst' // 可选：'sunburst'（默认）、'treemap'、'network'
})
]
});
2. 运行构建并查看报告
执行构建命令：
构建完成后，插件会自动生成 dist/stats.html（或你指定的路径），并自动在浏览器中打开。页面是一个可缩放、可搜索、可点击钻取的可视化图表，鼠标悬停显示模块路径与大小，点击可展开子依赖。
- 顶部显示总包体积、chunk 数量、最大单文件大小
- 中心圆环（sunburst）中，扇区面积代表相对体积，颜色深浅反映嵌套层级
- 左侧侧边栏可按大小/名称/路径过滤，支持正则匹配
3. 针对性优化建议
看到报告后，重点关注以下几类问题：
-
意外的全量引入：比如引入了
lodash却用了整个库，应改用lodash/debounce或lodash-es -
大型第三方库未按需加载：如
echarts、pdfjs-dist，考虑动态import()拆分 chunk -
重复依赖：同一包多个版本共存（如
react@18和react@17），检查pnpm list或yarn list，用 resolutions 或 overrides 统一版本 -
Source Map 或 dev-only 代码残留：确认
build.sourcemap在生产构建中为false，且没有console/debugger未清除
4. 进阶技巧
提升分析效率的小方法：
- 加
--mode preview构建临时分析版：vite build --mode preview，配合不同 config 分支做对比 - 输出 JSON 数据用于 CI/CD 自动检测：
visualizer({ emitFile: true, filename: 'stats.json' }) - 结合
build.rollupOptions.output.manualChunks手动拆包，再用 visualizer 验证拆分效果 - 若用 Vue，注意
defineAsyncComponent加载的组件会单独成 chunk，可在 visualizer 中验证是否生效
