rollup-plugin-visualizer是识别vite打包臃肿最直观有效的方式，通过treemap和sunburst图直观展示chunk体积、依赖链与嵌套关系，并结合manualchunks配置实现精准分包优化。
直接用 rollup-plugin-visualizer 生成可视化报告，是识别 Vite 打包臃肿最直观、最有效的方式。它不依赖猜测，而是把每个 chunk 的大小、嵌套关系、依赖路径全部摊开来看。
安装并启用 visualizer 插件
在项目中安装插件：
npm install -D rollup-plugin-visualizer- 在
vite.config.ts的plugins数组中加入：
plugins: [ visualizer({ open: true }) ]
执行 npm run build，构建完成后会自动打开一个交互式 HTML 页面。
看懂 treemap 和 sunburst 图
默认视图是 treemap（矩形嵌套图），面积越大代表体积越重：
- 深色大块：通常是
node_modules中的大型依赖（如echarts、ant-design-vue、全量lodash） - 细长条状小块：可能是重复引入的工具函数或未拆分的 utils 模块
- 孤立大文件：检查是否误将图片、字体、JSON 数据等资源直接
import进 JS 逻辑
切换到 sunburst 视图，能清晰看到某模块被哪些入口引用、层层依赖链有多深——这是定位“幽灵依赖”的关键。
结合 manualChunks 定位分割盲区
如果发现 vendor 文件依然巨大，说明默认代码分割没生效。此时要在 build.rollupOptions.output.manualChunks 中显式拆分：
- 按框架拆：
vue: ['vue', 'vue-router', '@vueuse/core'] - 按生态拆：
charts: ['echarts', 'echarts-gl'] - 按工具库拆：
utils: ['lodash-es', 'date-fns']
配置后重新构建，再打开 visualizer 对比——你会发现 vendor 消失，取而代之的是多个命名清晰、体积可控的 chunk。
排除干扰项，聚焦真实问题
有些“大体积”并非代码问题，而是配置偏差：
- source map 未关闭：构建时设
build.sourcemap = false - 开发依赖被误打包：检查
package.json中devDependencies是否混入了运行时依赖 - 第三方库未用 ES 版本：比如用了
lodash而非lodash-es，Tree Shaking 失效
这些都会在 visualizer 报告中暴露为“不该出现的大模块”，一眼就能揪出来。
