前端打包体积在线分析 - 可视化 Bundle 各模块占比

前端打包体积分析是指对构建工具（如 Webpack、Vite、Rollup、Parcel 等）生成的最终 bundle 文件进行拆解和可视化，直观展示各个模块、库、依赖在最终输出文件中所占的体积大小。通过这种分析，开发者可以快速定位哪些依赖过大、哪些代码可以被优化，从而进行针对性的体积瘦身，提升应用加载速度。常见的分析工具有 webpack-bundle-analyzer、source-map-explorer、rollup-plugin-visualizer 等。

在 Webpack 项目中，你可以通过以下方式生成 stats.json：

方法一（CLI）：
npx webpack --profile --json=stats.json
或使用精简模式减少文件体积：
npx webpack --profile --json=stats.json --stats-modules-only

方法二（webpack.config.js）：
在配置中设置 stats: 'verbose'，然后运行 npx webpack > stats.json 重定向输出。

方法三（webpack-bundle-analyzer）：
该插件默认会生成 stats.json，位于项目根目录。

提示：大型项目的 stats.json 可能达数十 MB，建议使用精简模式或仅提取 modules 信息。

矩形树图（Treemap） 是一种用面积表示数据占比的可视化图表。在本工具中：

• 矩形面积越大 → 该模块在 bundle 中占的体积越大
• 颜色深浅 → 反映模块相对大小（偏红=大模块，偏蓝=小模块）
• 嵌套结构 → 目录层级关系，可以点击进入子目录查看
• 悬停 → 查看模块名称、精确大小和占比

通过 Treemap，你可以一眼识别出哪些依赖占据了大部分打包体积，从而优先优化它们。

1. Tree Shaking（摇树优化）：移除未使用的代码，确保使用 ES Module 语法。
2. Code Splitting（代码分割）：使用 import() 动态导入，按路由/功能拆分 chunk。
3. 按需引入：对于 UI 库（如 Ant Design、Element Plus），使用按需加载而非全量导入。
4. 替换大型依赖：如用 dayjs 替代 moment.js，用 lodash-es 替代 lodash。
5. 压缩与混淆：使用 TerserPlugin、cssnano 等进行代码压缩。
6. 外部化（External）：将大型库通过 CDN 引入，不打包进 bundle。
7. 去重：检查是否有重复打包的依赖（如多个版本的同一库），使用 dedupe 策略。

本工具支持多种数据格式，会自动检测并解析：

• Webpack Stats JSON：包含 modules 或 assets 数组的标准 stats 输出
• 简单模块数组：[{name: "xxx", size: 12345}, ...]
• 键值对格式：{"module-a": 5000, "module-b": 3000}
• CSV 格式：包含 name 和 size 列的逗号分隔文件

模块名称中的路径分隔符（/）会被自动识别并构建目录树结构。

重复依赖通常由以下原因造成：

• 版本不一致：不同的子依赖引用了同一库的不同版本（如 lodash@4.17.20 和 lodash@4.17.21）
• 路径差异：同一库通过不同路径被引用（如 lodash 和 lodash-es）
• 打包配置问题：多个 entry 或 chunk 独立打包了相同依赖

解决方法：使用 npm ls <package-name> 检查版本树，使用 resolutions（Yarn）或 overrides（npm）强制统一版本，或配置 Webpack 的 resolve.alias。

Tree Shaking 失效的常见原因：

• 使用了 CommonJS：Tree Shaking 依赖 ES Module 的静态结构，require() 和 module.exports 无法被 shake
• 副作用（Side Effects）：库的 package.json 中 sideEffects 字段未正确配置
• Babel 转换问题：Babel 可能将 ES Module 转换为 CommonJS，需要设置 modules: false
• 动态导入：使用变量动态拼接的导入路径无法被静态分析

检查方法：在打包产物中搜索疑似被 shake 掉的代码，确认其是否仍然存在。

这取决于项目类型和目标用户群体：

• 小型工具库/组件库：建议 gzip 后 < 50KB
• 普通 Web 应用首页：建议初始加载 JS gzip 后 < 200KB
• 大型 SPA 应用：配合 Code Splitting，每个路由 chunk 建议 < 300KB（gzip）
• 移动端 H5：应更加严格，初始 JS < 150KB（gzip）

使用 Lighthouse 或 WebPageTest 等工具综合评估加载性能，而不仅仅关注体积数字。