webpack/webpack-bundle-analyzer

这是什么？

核心功能

• 01交互式可缩放的 bundle 模块树状图
• 02既可作为 webpack 插件使用，也可通过 CLI 分析 stats 文件
• 03解析压缩后的代码，显示模块真实体积
• 04支持原始、解析后、gzip、Brotli 和 Zstandard 等多种体积统计
• 05可输出 HTTP 服务、静态 HTML 报告或 JSON 文件
• 06支持通过侧边栏或右键菜单筛选 chunk

适用场景

• 查找 webpack 项目中体积过大或被误引入的依赖
• 在优化过程中跟踪 bundle 体积的变化
• 在 CI 或服务器上基于已有的 stats.json 分析打包产物
• 生成静态报告并分享给团队成员

快速上手

1. 1

   使用 npm 安装为开发依赖

   npm install --save-dev webpack-bundle-analyzer
2. 2

   在 webpack 配置的 plugins 数组中添加 BundleAnalyzerPlugin 并运行 webpack

使用前须知

• !仅支持分析 webpack 打包结果，无法用于其他打包工具的输出。

收录于专题

标签

常见问题

webpack-bundle-analyzer 是什么？

一个 webpack 插件和命令行工具，以可缩放的交互式树状图展示打包产物中各模块的体积构成。 Webpack Bundle Analyzer 用于查看 webpack 打包产物内部的实际构成。它将每个 bundle 绘制成可交互、可缩放的树状图，每个矩形代表一个模块，便于快速找出体积最大的部分，发现误被打包进来的模块，并据此进行优化。

webpack-bundle-analyzer 可以免费使用吗？用的什么许可证？

webpack-bundle-analyzer 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

webpack-bundle-analyzer 还在维护吗？

活跃维护中。webpack-bundle-analyzer 最近一次提交是在 2026年11月6日。

webpack-bundle-analyzer 适合用来做什么？

查找 webpack 项目中体积过大或被误引入的依赖 在优化过程中跟踪 bundle 体积的变化 在 CI 或服务器上基于已有的 stats.json 分析打包产物 生成静态报告并分享给团队成员

webpack-bundle-analyzer 怎么安装和运行？

使用 npm 安装为开发依赖: npm install --save-dev webpack-bundle-analyzer 在 webpack 配置的 plugins 数组中添加 BundleAnalyzerPlugin 并运行 webpack

在哪里获取 webpack-bundle-analyzer？

源代码和安装说明在 GitHub 上：https://github.com/webpack/webpack-bundle-analyzer