最直接有效的方式是使用 rollup-plugin-visualizer 插件生成交互式体积分析报告，它能直观呈现每个 chunk、模块、依赖包的大小占比和嵌套关系，无需猜测就能定位臃肿来源；安装后在 vite.config.ts 中配置 visualizer 插件并启用 open、filename、template 等选项，构建后自动打开 dist/stats.html 报告，通过 treemap/sunburst 视图分析体积分布、下钻查看子模块、识别整包引入或 vendor 过大等问题，并结合 sourcemap 关闭、ES 模块引用等配置排除干扰。
最直接有效的方式是使用 rollup-plugin-visualizer 插件生成交互式体积分析报告，它能直观呈现每个 chunk、模块、依赖包的大小占比和嵌套关系，无需猜测就能定位臃肿来源。
安装与基础配置
在项目中安装插件：
npm add -D rollup-plugin-visualizer
然后在 vite.config.ts（或 .js）的 plugins 数组中加入：
- 导入插件：
import { visualizer } from 'rollup-plugin-visualizer' - 启用并设置关键选项：
open: true（构建后自动打开报告）、filename: 'stats.html'（输出路径）、template: 'treemap'（推荐默认视图） - 可选开启压缩后体积统计：
gzipSize: true、brotliSize: true
运行构建并解读报告
执行生产构建命令：
立即学习“Java免费学习笔记（深入）”；
npm run build
构建完成后，浏览器会自动打开 dist/stats.html。重点关注以下信息：
- 矩形块面积 ≈ 模块原始体积；颜色越深通常代表 gzip 后占比越高
- 鼠标悬停显示文件名、原始大小、gzip 大小、是否为第三方依赖
- 点击大块可下钻，查看其内部包含哪些子模块
- 切换到
sunburst视图，能看清某模块被哪些入口引用、依赖链有多深
结合配置精准定位问题
报告中暴露的异常体积往往指向具体配置或引入方式问题：
- 出现整包
lodash或echarts：说明未使用 ES 版本（如lodash-es）或未按需引入 -
vendor过大：检查build.rollupOptions.output.manualChunks是否缺失，可显式拆分框架、图表、工具库等 - 图片/字体/JSON 被打包进 JS：确认是否误用
import直接加载资源，应改用 URL 方式或静态资源目录 - 存在大量重复
utils小块：可能因未统一抽离或命名不一致导致无法合并
排除干扰项提升判断准确性
有些“大体积”并非代码本身问题，而是构建配置偏差：
- 确保
build.sourcemap = false，避免 source map 拖累体积 - 检查
package.json中devDependencies是否混入了运行时依赖 - 确认第三方库使用的是支持 Tree Shaking 的 ES 模块版本（如
vue-router而非vue-router/dist/vue-router.js） - 若用到了
unplugin-vue-components等自动引入插件，也要留意是否无意中触发了全量注册
