illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 webpack-contrib/webpack-bundle-analyzer 官方 README（master 分支）编写，对照稳定版 5.3.0（2026-03-25）

速查 ​

  • 当前版本：5.3.0（2026-03-25，webpack-contrib 出品）；zstd 压缩档需 Node 22.15.0+
  • TypeScript 类型：社区包 @types/webpack-bundle-analyzer（当前 4.7.0）
  • 安装：pnpm add -D webpack-bundle-analyzer
  • 最小用法：new BundleAnalyzerPlugin() → 默认 server 模式、8888 端口、自动开浏览器
  • 启动模式：server（默认）/ static / json / disabled
  • 体积档位：stat / parsed（默认）/ gzip / brotli
  • CLI：webpack-bundle-analyzer <bundleStatsFile> [bundleDir] [options]
  • 图表：仅 Treemap（无 sunburst / network）
  • 完整说明见 入门 / 核心选项与视图

BundleAnalyzerPlugin 选项 ​

启动模式与端口 ​

选项类型默认说明
analyzerModeserver | static | json | disabledserver报告形态：HTTP 服务 / 单 HTML / JSON / 仅 stats
analyzerHoststring127.0.0.1server 模式监听主机
analyzerPortnumber | 'auto'8888server 模式端口；'auto' 由 OS 分配
analyzerUrl(ctx) => string—自定义打印到 console 的 URL，入参 { listenHost, boundAddress }
openAnalyzerbooleantrue是否自动打开浏览器

报告文件 ​

选项类型默认说明
reportFilenamestringreport.htmlstatic / json 模式输出文件名
reportTitlestring | () => stringBundle Reportstatic 模式 HTML title

体积档位 ​

选项类型默认说明
defaultSizesstat | parsed | gzipparsed报告初始显示哪一档
compressionAlgorithmgzip | brotli | zstdgzip算压缩档用哪种压缩算法

defaultSizes 与 compressionAlgorithm 维度不同：前者是「初始显示哪档」，后者是「算压缩档时用什么算法」。

Stats 文件 ​

选项类型默认说明
generateStatsFilebooleanfalse是否额外生成 stats JSON
statsFilenamestringstats.jsonstats 文件名
statsOptionsobjectnull透传给 stats.toJson()；建议 { source: false } 防源码泄漏

过滤与日志 ​

选项类型默认说明
excludeAssetsnull | pattern | pattern[]null排除资产展示；pattern 可为 String（转 RegExp）/ RegExp / (name) => boolean；多 pattern 任一匹配即排除
logLevelinfo | warn | error | silentinfo日志级别
startAnalyzerbooleantrueserver 模式下是否自动启动 server

CLI 选项 ​

text
webpack-bundle-analyzer <bundleStatsFile> [bundleDir] [options]
Flag等价 / 类型说明
-m, --mode <mode>analyzerModeserver / static / json / disabled
-p, --port <port>analyzerPort端口号或 auto
-s, --default-sizes <type>defaultSizesstat / parsed / gzip
--compression-algorithm <alg>compressionAlgorithmgzip / brotli / zstd
-O, --no-openopenAnalyzer = false不自动开浏览器
-e, --exclude <pattern>excludeAssets可多次出现
-r, --report <file>reportFilenamestatic / json 模式输出文件
-l, --log-level <level>logLevel日志级别
-h, --help—帮助
-v, --version—版本

CLI 模式需要 bundle 文件落盘。webpack-dev-server / 内存型构建下 CLI 会报 No such file 并退化为只显示 stat size（见 issue #147），这种场景必须用 Plugin 模式。

Stats JSON 生成命令 ​

bash
# Unix / macOS / Linux
webpack --profile --json > stats.json

# Windows PowerShell（防 BOM）
webpack --profile --json | Out-file 'stats.json' -Encoding OEM

Windows PowerShell 直接重定向 > 会带 BOM，下游解析易出错，必须用 Out-file -Encoding OEM。

四档体积对照 ​

档位含义数据来源用途
stat输入大小，变换前（未压缩未混淆）Webpack stats 对象判断 Tree-shaking 空间
parsed（默认）输出大小（压缩器处理后）读磁盘 bundle看「写进 bundle 多少」
gzip对 parsed 再 gzip算出看用户实际下载字节
brotli对 parsed 再 brotli算出比 gzip 多省 15–20%

Treemap UI 交互 ​

操作行为
鼠标悬停显示模块名 / 三档体积 / 路径
点击矩形钻入子模块
左侧 sidebar（点 > 展开）勾选 / 取消 chunk
右键 / Ctrl+click chunkContext Menu：Hide chunk / Hide all other chunks / Show all chunks
顶部切档按钮切 stat / parsed / gzip

同类工具视图对比 ​

工具图表说明
webpack-bundle-analyzer仅 treemapWebpack 生态默认
bundle-statstreemap + 其他跨构建 diff 强
Statoscopetreemap + 其他深度诊断
source-map-explorertreemap基于 sourcemap
rollup-plugin-visualizertreemapVite / Rollup 替代品

sunburst / network 是其他工具的特性，webpack-bundle-analyzer 不支持。

CI 标准配置 ​

js
new BundleAnalyzerPlugin({
  analyzerMode: 'static',          // 不挂起，输出 HTML
  reportFilename: 'report.html',
  openAnalyzer: false,             // 无头环境不开浏览器
  analyzerPort: 'auto',            // 防并行 build 端口冲突
  defaultSizes: 'gzip',            // 生产评估看 gzip
  generateStatsFile: true,
  statsOptions: { source: false }, // 防源码泄漏
  excludeAssets: [/\.map$/, /LICENSE/],
  logLevel: 'warn',
})

版本与生态 ​

维度值
当前稳定版5.3.0（2026-03-25，3 个月内）
维护组织webpack-contrib（GitHub: webpack-contrib/webpack-bundle-analyzer）
旧仓库地址github.com/webpack/webpack-bundle-analyzer（仍可访问但非官方新址）
TypeScript 类型@types/webpack-bundle-analyzer（4.7.0）
Node 要求见 README badge；zstd 压缩档需 Node 22.15.0+
与 Vite 关系无官方关系；Vite 用 Rollup，对应 rollup-plugin-visualizer / vite-bundle-visualizer
每周下载量百万级

官方资源 ​