直接使用 rollup-plugin-visualizer 可在 Vite 中可视化分析 TypeScript 项目打包体积，配置简单、效果直观；安装插件后在 vite.config.ts 中启用，构建后自动生成并打开 dist/stats.html 报告，支持 treemap、sunburst 等多视图分析，结合 manualChunks 优化分包，并可识别 source map、devDependencies 等干扰项。
安装并启用 visualizer 插件
在项目中安装插件：
npm install -D rollup-plugin-visualizer
然后在 vite.config.ts 的 plugins 数组中加入：
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，并自动在浏览器中打开。报告默认使用 treemap 视图，矩形面积越大，代表模块体积越重。
- 深色大块：大概率是 node_modules 中的大型依赖（如 echarts、ant-design-vue、全量 lodash）
- 细长条状小块：可能是重复引入的工具函数或未拆分的 utils 模块
- 孤立大文件：检查是否误将图片、字体、JSON 等资源直接 import 进 JS 逻辑
切换视图定位深层依赖
点击右上角图标可切换到 sunburst 视图，它以环形层次结构展示模块被谁引用、引用链有多深——特别适合揪出“幽灵依赖”和意外透传的深层依赖。
也可切换到 network 或 list 视图，前者看模块间包含关系，后者快速筛选体积 Top N 的文件。
结合 manualChunks 精准优化分包
如果发现 vendor chunk 过大，说明默认代码分割没生效。可在 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 - devDependencies 被误打包 → 检查
package.json中是否混入运行时依赖 - 第三方库用了 CommonJS 版本 → 优先选用 ES 版本（如
lodash-es替代lodash），确保 Tree Shaking 生效
这些都会在 visualizer 报告里暴露为“不该出现的大模块”，一眼就能识别。
