无需登录 数据私有 本地保存

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

10
0
0
0

Webpack 打包分析器

上传 stats.json 文件，可视化分析打包模块构成与体积分布

拖拽 stats.json 到此处

或点击选择文件

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