Webpack 打包分析器 - stats.json 可视化

完整操作流程

1. 生成 stats.json 文件
   在项目根目录执行命令 npx webpack --profile --json > stats.json，其中 --profile 记录各阶段耗时，--json 输出完整 JSON 统计数据。如使用自定义配置，可在 webpack.config.js 中设置 stats: { all: true } 获取最详尽的数据。生成的文件通常位于项目根目录。
2. 打开 Webpack 打包分析器页面
   在浏览器中访问本工具页面，页面加载后即可看到操作区域和统计信息面板。如果只是想先体验功能，可以跳过下一步直接加载演示数据。
3. 上传 stats.json 文件
   将生成的 stats.json 文件拖拽到指定的拖拽区域，或点击拖拽区域通过文件选择器浏览并选中文件。文件大小无严格限制，但建议通过精简 stats 输出字段来控制文件体积，避免浏览器内存不足。
4. 查看统计信息总览
   文件加载后，页面顶部的统计卡片会显示总模块大小、模块总数、Chunks 数量和最大模块等关键指标。这些数据帮助您快速了解打包产物的整体情况，判断优化方向。
5. 浏览 Treemap 可视化图表
   在可视化区域查看交互式矩形树图。矩形面积越大表示模块体积越大，颜色越深表示该区域模块越集中。点击任意矩形可钻入查看该目录下的子模块，面包屑导航支持逐层返回上一级目录。
6. 使用排序和搜索定位问题模块
   在表格区域使用排序功能按大小或名称排列模块，快速找到体积最大的依赖项。使用搜索框输入关键词筛选特定模块，如搜索 lodash、moment 等常见大型库名称，评估其对打包体积的影响。
7. 对比分析与优化验证
   应用优化措施后（如 Tree Shaking、替换大型库、调整 splitChunks 配置），重新生成 stats.json 并上传分析，对比前后模块大小变化，验证优化效果。建议在 CI/CD 流程中集成打包体积对比，持续监控回归。