UD5工具箱
stats.json 是 Webpack 生成的打包统计文件，包含模块依赖图、chunk 划分、资源大小、编译耗时等详细信息。通过 npx webpack --json > stats.json 或在 webpack 配置中设置 stats: 'verbose' 即可生成，是分析打包产物的核心数据源。本工具正是基于 stats.json 中的 modules 和 chunks 数据进行可视化分析。
运行命令 npx webpack --profile --json > stats.json，--profile 会记录各阶段的耗时信息，--json 输出完整的 JSON 格式统计数据。如果使用自定义配置，可在 webpack.config.js 中设置 stats: { all: true } 来获取最详尽的数据。建议使用生产模式 --mode production 生成，结果更贴近实际部署情况。
Treemap（矩形树图）将模块按目录层级嵌套展示，矩形面积与模块大小成正比。大面积矩形一目了然，帮助快速定位体积异常的依赖。点击矩形可钻入查看子目录，面包屑导航方便逐层回溯。颜色越深的区域通常表示该目录下模块体积越大。这种可视化方式比纯表格数据更直观地呈现模块分布情况。
Tree Shaking 是 Webpack 移除未使用导出代码的优化技术，依赖 ES Module 的静态导入特性。上传 stats.json 后，搜索疑似未被 shake 掉的模块（如整个 lodash 被引入而非按需导入 lodash-es），对比模块实际使用情况即可发现优化空间。模块大小如果接近完整库的体积，通常说明 Tree Shaking 没有生效。
常见策略包括：替换为更轻量的替代库（如 dayjs 替代 moment）、按需导入（如 lodash-es）、使用 externals 将大型库 CDN 化、启用 splitChunks 将公共依赖单独抽取、以及利用 Webpack 5 的 Module Federation 共享依赖。通过本工具分析 stats.json，可以直观看到 node_modules 中各模块的体积占比，为优化决策提供数据支撑。
大型项目的 stats.json 可能达到数十 MB。可以通过 stats: { modules: true, reasons: false, moduleTrace: false } 精简输出，只保留模块大小信息。本工具只解析 modules 和 chunks 数据，建议生成时过滤掉不需要的字段以减小文件体积，避免浏览器因内存不足而加载失败。
推荐使用动态 import() 进行路由级拆分，配合 splitChunks.cacheGroups 将 node_modules 单独打包。分析 stats.json 中各个 chunk 的组成，确保公共依赖被正确提取，避免重复打包同一模块到多个 chunk 中。通过本工具的 Chunks 统计信息可以快速了解代码拆分的整体效果。
webpack-bundle-analyzer 是经典的打包分析工具，提供交互式 Treemap。本工具作为在线替代方案，无需安装即可使用，支持拖拽上传、钻入式浏览、模块搜索排序，且完全在浏览器端运行，数据不会上传到服务器，保护隐私安全。适合团队演示和快速分析场景，无需额外安装任何包。
建议在 CI/CD 流程中集成 webpack --json 输出，使用 bundlesize 或自定义脚本对比前后版本的模块体积变化。将 stats.json 纳入版本管理或 artifact 存储，便于回溯历史打包状态，及时发现体积回归。定期使用本工具上传最新 stats.json 进行可视化对比，确保优化措施持续生效。
Webpack 5 的文件系统缓存（cache.type: 'filesystem'）主要影响编译速度，不影响 stats.json 中的模块大小和依赖关系数据。分析时建议使用生产模式（--mode production）生成的 stats.json，更贴近实际部署的打包结果。缓存机制不会导致 stats.json 数据不准确，可以放心分析。