在 Vite 项目中分析打包产物体积分布，核心是借助 rollup-plugin-visualizer 插件生成可视化报告，它能清晰展示各模块、依赖包、资源文件的体积占比和依赖关系；安装配置后运行 npm run build 即可生成交互式 treemap 报告，支持下钻分析与命令行快速排查。
在 Vite 项目中分析打包产物体积分布，核心是借助 rollup-plugin-visualizer 插件生成可视化报告，它能清晰展示各模块、依赖包、资源文件的体积占比和依赖关系。
安装并配置 visualizer 插件
先安装插件：
npm add -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 文件名
template: 'treemap' // 可选：'treemap'（推荐）、'sunburst'、'network'
})
]
});
运行构建并查看体积报告
执行生产构建命令：
立即学习“Java免费学习笔记（深入）”；
npm run build
构建完成后，插件会自动生成 dist/stats.html（或你指定的路径），并在浏览器中打开。页面以交互式树图（treemap）形式展示：
- 每个矩形块代表一个 chunk 或模块，面积大小 ≈ 打包后体积
- 颜色深浅通常表示 gzip 后体积占比（越深越重）
- 鼠标悬停可查看具体文件名、原始大小、gzip 大小、是否为第三方依赖等
- 支持点击下钻，查看某 chunk 内部模块构成
定位大体积来源的实用技巧
报告中重点关注以下几类高亮项：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
node_modules 中的大型依赖：比如未按需引入的
lodash、全量引入的moment、或未 Tree-shaking 的 UI 库 - 重复打包的模块：同个包在多个 chunk 中出现，可能因版本不一致或未 external
- 未压缩的静态资源：如未优化的图片、字体文件出现在 JS chunk 中（例如 base64 编码过大）
-
巨型单文件组件或工具函数集：比如一个
utils.ts导出几十个函数却被整块引入
确认问题后，可针对性优化：改用更轻量替代库、启用 import() 动态导入、配置 optimizeDeps.exclude 或 build.rollupOptions.external 等。
补充：命令行快速查看体积（无需图形界面）
若只想快速看体积排序，可在构建后运行：
npx rollup-plugin-visualizer --file dist/stats.json
或使用社区脚本如 source-map-explorer（需生成 sourcemap）：
npm add -D source-map-explorer
然后在 vite.config.ts 中开启 sourcemap：
build: {
sourcemap: true
}
构建后执行：
npx source-map-explorer dist/assets/index.*.js
终端输出按大小排序的模块调用链，适合 CI 或快速排查。
