【免费下载链接】webpack-bundle-analyzerWebpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap项目地址https://gitcode.com/gh_mirrors/we/webpack-bundle-analyzer点击查看免费下载webpack-bundle-analyzer 是 Webpack 生态中最流行的 bundle 可视化工具它以交互式可缩放 treemap矩形树图呈现打包产物中每个 chunk、模块的真实体积帮助开发者定位哪些模块撑大了 bundle。本文以仓库 CHANGELOG.md 为时间主线完整梳理该插件从 1.2.5 到 5.3.1 的演进历程并结合 src/ 与 client/ 下的源码剖析每条变更背后的实现机制让读者既能看到改了什么也能理解为什么这样改、底层如何工作。项目定位插件 CLI 双形态的 bundle 分析器在进入版本史之前先明确这个项目的核心骨架。仓库根目录的 package.json 表明项目以lib/index.js为入口、lib/bin/analyzer.js为命令行入口同时提供两种使用方式Webpack 插件在 webpack 配置的plugins中注册BundleAnalyzerPlugin构建完成后自动产出分析报告见 src/BundleAnalyzerPlugin.js。CLI 工具针对已生成的 stats JSON 文件离线分析入口为 src/bin/analyzer.js。两者共享同一套分析内核 src/analyzer.js 与渲染层 src/viewer.js这也解释了为什么 CHANGELOG 中的大量改动能同时作用于插件与 CLI 两条路径。5.x 时代现代构建工具的适配与压缩算法扩展5.0.0 ~ 5.3.15.x 是当前仓库的稳定主线最新版本 5.3.1这一代的核心叙事是跟上 Node.js 版本演进、扩展压缩算法、拥抱 Rspack 等新兴构建工具。5.3.1显式stats.toJson()选项兼容 Rspack 2.05.3.1 的 Patch 变更中有两条值得关注显式定义stats.toJson()选项以支持 Rspack 2.0。此前插件直接调用 webpack 的stats.toJson()参数细节交给各构建工具自行兜底Rspack 2.0 对默认 stats 输出的处理与 webpack 不同若不显式指定选项分析结果可能失真。现在插件内部定义了一份完整的analyzerStatsOptions见 src/BundleAnalyzerPlugin.js#L34-L57包含all: false、assets: true、cachedModules: true、chunks: true、chunkModules: true、nestedModules: true、entrypoints: true、source: false、runtimeModules: false等精确开关并在server/static/json三种模式下统一以这份选项调用stats.toJson(analyzerStatsOptions)。这份选项清单同时明确了分析器的数据边界只要 assets、chunks、modules、entrypoints 等字段关闭源码、运行时模块与 warning/error 计数从而降低 stats 序列化的体积。修复 treemap 不响应 chunk 复选框选择的问题。前端状态层 client/store.js 中selectedChunks由复选框列表驱动visibleChunks计算属性据此过滤出可见 chunk本次修复确保了 treemap 的渲染数据与复选框状态强一致。5.3.0ECMA 新特性、propTypes 与 writeStats 竞态修复代码使用新的 ECMA 特性客户端组件开始采用更新的语法同时为所有组件补齐propTypes见 client/components/types.js 中的zstdSize、parsedSize等类型定义提升开发期类型自检能力。修复writeStats中的竞态条件writeStats是 stats JSON 文件的写入函数实现在 src/statsUtils.js#L94-L96它通过自定义StatsSerializeStream一个Readable流逐层生成缩进格式化的 JSON再经pipeline写入文件。旧实现对并发写入缺乏保护可能导致stats.json内容错乱当前实现基于 Node 内置stream/promises的pipeline确保流在完成前不会被中断。5.2.0Zstandard 压缩支持5.2.0 引入 Zstandardzstd压缩尺寸计算。压缩逻辑集中在 src/sizeUtils.jsexport const isZstdSupported createZstdCompress in zlib; export function getCompressedSize(algorithm, input) { if (algorithm gzip) { return zlib.gzipSync(input, { level: 9 }).length; } if (algorithm brotli) { return zlib.brotliCompressSync(input).length; } if (algorithm zstd isZstdSupported) { return zlib.zstdCompressSync(input).length; } throw new Error(Unsupported compression algorithm: ${algorithm}.); }从源码可以推断出三点实现事实zstd 依赖 Node.js 内建zlib.createZstdCompress因此该能力是运行时探测的isZstdSupported为false时CLI 的--compression-algorithm只会列出gzip、brotli两个可选值见 src/bin/analyzer.js#L15-L17。模块级别的压缩尺寸在 src/tree/Module.js#L110-L122 中按需计算并缓存_zstdSize等私有字段避免重复压缩。前端侧client/components/ModulesTreemap.jsx#L40-L42 依据globalThis.compressionAlgorithm决定是否在尺寸切换器中展示 Zstandard 项。同一版本还更新了sirv静态资源服务器与wsWebSocket依赖这两者分别支撑报告页面的静态资源与 server 模式下的实时推送。5.1.x暗色模式与解析健壮性5.1.0 新增可选暗色/亮色模式切换主题状态由 client/store.js#L29-L42 管理默认跟随系统prefers-color-scheme并持久化到localStoragetoggleDarkMode通过设置document.documentElement.dataset.theme切换主题。5.1.1 进一步修复了 CSS Modules 场景下暗色模式 tooltip 的样式问题。5.1.1 避免 IIFE 形式 bundle 的解析失败bundle 解析器 src/parseUtils.js 基于 acorn 识别模块包装器IIFE 包装的 bundle 在早期版本中可能被误判本次放宽了识别规则。5.1.0 防止assets/modules为undefined时抛TypeError对应 src/analyzer.js#L122-L144 中getBundleModules对chunks?.map(...)与modules || []的防御性处理。5.0.0Breaking Change 与新能力集中落地Node 版本门槛升至 20.9.0 以上见 package.json 的engines字段。对使用旧 Node 的项目而言这是升级 5.x 的硬性前提。基于 stats JSON 信息按 ES Module 解析 bundleparseBundle调用处src/analyzer.js#L287-L289会根据statAsset.info.javascriptModule决定以module还是script模式解析从而正确处理 ESM 语法特性。新增 Brotli 压缩支持compressionAlgorithm参数从此支持gzip | brotli | zstd三选一。新增 React Native 支持。4.x 时代Webpack 5、性能与依赖瘦身4.0.0 ~ 4.10.24.x 的关键词是规模化适配 Webpack 5、应对超大 stats 文件同时通过替换依赖把插件体积做到更小。4.0.0正式支持 Webpack 54.0.0 是 5.x 之前最重要的一次 Breaking Change最低 Node 版本从 6/8 提升到 10.13.0同时完成对 Webpack 5 的适配并修复了在无浏览器处理程序的环境中设置openAnalyzer: true导致的崩溃。测试侧则引入多 Webpack 版本并行测试仓库 package.json 的 devDependencies 中同时存在webpackv5与webpack-4两个包可印证这一点。4.1.0 ~ 4.2.0生成提速与依赖瘦身4.1.0 显著加快stats.json生成速度即generateStatsFile: true时的写文件路径。核心实现为 src/statsUtils.js 的流式序列化方案——用一个生成器驱动的Readable流逐段产出 JSON避免一次性JSON.stringify整个 stats 对象造成的大内存占用与卡顿。4.2.0 连续三个 PR 削减依赖并修复两类崩溃webpack 数组配置array config生成的 bundle、以及non-asset类型资源导致的解析失败对应 src/analyzer.js#L254-L258 中对asset.type ! asset的过滤逻辑。4.3.0用 Node 内置 HTTP 服务器替换 Express这是架构层面的重要变化移除 Express 依赖改用 Node 原生http.createServer加sirv中间件见 src/viewer.js#L147-L169同时把filesize挪到 devDependencies。此后报告的依赖更少、启动更快也为后续 5.x 的持续瘦身奠定了基础。4.4.0 ~ 4.4.2FoamTree 升级与健壮性修复4.4.0 将 FoamTreetreemap 渲染库升级到 3.5.0并从 vendor 目录改为 NPM 包引入现为 devDependencies 中的carrotsearch/foamtree同时改进缩放动画期间标签的可见性并修复悬停空白区域弹出空 tooltip 的问题。4.4.1 修复模块 chunks 缺失missing module chunks问题——仓库测试目录 test/stats/with-missing-module-chunks/ 即为该场景的回归样例。4.4.2 修复compiler.outputFileSystem.constructor为undefined时的崩溃。4.5.0 ~ 4.6.0发布瘦身、确定性颜色与 URL 定制4.5.0 停止把src目录发布到 npm并在内部将 e2e 从 Nightmare 换为 Puppeteer、测试框架从 Mocha 换为 Jest当前 jest.config.js 与 package.json 的test脚本可印证。4.6.0 新增两项能力server 模式可输出自定义 URLanalyzerUrl回调见 src/BundleAnalyzerPlugin.js#L31 的类型定义与 src/viewer.js#L179-L183 的调用chunk 颜色改为确定性生成同一 chunk 在不同次报告中保持同色。4.6.1 修复 CLI 模式输出 URL 与预期不符的问题。4.7.0 ~ 4.8.0过滤能力与大文件支持4.7.0 支持只显示每个 entrypoint 的 initial chunks数据侧由 src/analyzer.js#L152-L168 的getChunkToInitialByEntrypoint计算 chunk 与入口的归属关系并在 src/analyzer.js#L424 以isInitialByEntrypoint字段输出。4.8.0 支持读取超过 500MB 的 stats.json读取端使用 discoveryjs/json-ext 的parseChunked流式解析src/analyzer.js#L432-L434写入端使用自定义序列化流双向流式化使超大文件不再撑爆内存。4.8.0 还优化了搜索体验非匹配模块在视图中灰显对应 client/store.js#L129-L141 的searchQueryRegexp与前端高亮逻辑。4.9.0 ~ 4.10.2细节完善与再瘦身4.9.0Webpack 5 下勾选 Show content of concatenated modules 时展示拼接入口模块concatenated entry module的内部内容——对应 src/tree/ConcatenatedModule.js 的fillContentModules与前端 client/store.js#L239-L260 的filterModulesForSize中的showConcatenatedModulesContent判断。4.9.1 与 4.10.0用 JavaScript 原生 API 替换lodash.*系列包显著缩小包体积4.10.0 同时支持过滤 entrypoint 列表getEntrypoints在 src/viewer.js#L58-L70 实现前端据此生成入口过滤项。4.10.1 修复this.handleValueChange.cancel()报错4.10.2 修复.cjs文件未被正确处理的问题对应 src/analyzer.js#L13 中FILENAME_EXTENSIONS正则包含js|mjs|cjs|bundle。3.x 时代交互体验与输出模式成型3.0.0 ~ 3.9.03.x 定义了今天用户熟悉的报告界面形态3.0.0BreakingNode 最低版本提升到 6.14.4拼接模块concatenated modules内容默认隐藏可用侧边栏复选框开启新增模块搜索、侧边栏固定/调整大小、侧边栏开关按钮等交互内部状态管理引入MobX延续至今见 client/store.js。同时视觉上合并仅含单个子文件夹的嵌套文件夹让树图更紧凑。3.3.0支持通过右键上下文菜单显示/隐藏 chunk。3.4.0新增analyzerPort: auto由操作系统分配空闲端口插件侧在 src/BundleAnalyzerPlugin.js#L101-L102 将auto归一化为端口0并避免修改已生成的stats.json。3.5.0 ~ 3.6.x报告标题与 favicon 优化支持output.globalObject为self的构建tooltip 可读性提升。3.7.0新增JSON 输出模式插件analyzerMode: jsonCLI--mode json数据直接以 JSON 文件导出便于 CI 流水线消费实现见 src/viewer.js#L315-L338 的generateJSONReport。3.8.0支持WebWorkerChunkTemplatePlugin生成的 worker chunk以及任意自定义globalObject仓库 test/bundles/validWebpack4AsyncChunkUsingCustomGlobalObject.js 等测试 bundle 即为这些解析场景的样本。3.9.0新增reportTitle选项默认输出格式化后的当前时间并支持解析包含子资源child assets的 bundle。2.x 时代解析能力与实时更新的地基2.0.0 ~ 2.13.12.x 确立了解析 minified bundle 得到真实 parsed 尺寸这一核心卖点2.0.0UI 完全重写Preact Webpack 2新增gzip 尺寸展示与尺寸切换器修复 CSS 模块等 asset 模块的尺寸计算。2.1.0 ~ 2.5.0新增logLevel、defaultSizes选项、analyzerHost选项与--hostCLI 参数支持output.jsonpFunction。2.6.0 ~ 2.7.0defaultSizes正式落地侧边栏新增 chunk 选择控制。2.8.0里程碑——支持webpack --watch与 webpack-dev-server源码变化后通过WebSocket自动更新模块树图。该机制沿用至今src/viewer.js#L197-L228 中服务端在每次构建完成后调用updateChartData向所有已连接客户端推送chartDataUpdated事件。2.8.2 大幅提升 gzip 尺寸精度2.8.3 修复随机端口通告问题并支持 ESNext 语法解析。2.9.0 ~ 2.11.0侧边栏展示 chunk 尺寸支持箭头函数模块包装器对应 src/parseUtils.js#L44-L46 中同时接受FunctionExpression与ArrowFunctionExpression支持 Webpack 4 的 chunked modules 与拼接模块内容展示。2.12.0 ~ 2.13.1新增excludeAssets选项2.13.0 起放宽解析逻辑——无法解析或缺失的 chunk 不再导致整体失败报告仍展示其余数据这正是 README Troubleshooting 中No bundles were parsed. Analyzer will show only original module sizes提示的由来2.13.1 将生成的 stats.json 改为带缩进的 pretty-print 格式即 src/statsUtils.js 序列化器的行为。1.x 时代功能奠基1.2.5 ~ 1.5.4首个公开版本 1.2.5 之后1.x 快速补齐了插件的基本能力statsOptions选项1.5.0、static 报告模式1.4.0、startAnalyzer选项1.3.0、对DedupePlugin的兼容1.4.x/1.5.2、数组形式模块描述符的解析1.5.2以及将插件挂钩点从emit事件改为done事件1.5.1——后者正是当前 src/BundleAnalyzerPlugin.js#L168-L173 中compiler.hooks.done.tapAsync(...)的早期形态。源码级原理一条 stats 数据如何变成 treemap将上述版本演进落到代码层面完整链路如下收集 stats插件在done钩子中以analyzerStatsOptions5.3.1 起显式传入调用stats.toJson()得到StatsCompilation对象src/BundleAnalyzerPlugin.js#L122-L166。过滤与解析src/analyzer.js 的getViewerData先剔除非js/mjs/cjs/bundle扩展名、无 chunk 归属、被excludeAssets命中的资源若提供bundleDir再对每个资源调用parseBundleacorn acorn-walk 实现的模块包装器识别覆盖函数包装、DedupePlugin数组描述符、Array.concat优化等形式从而得到 parsed 源码与 parsed 尺寸。建树与压缩模块按路径组织成Folder树src/tree/由 src/sizeUtils.js 按compressionAlgorithm计算 gzip/Brotli/zstd 尺寸模块级尺寸带缓存。渲染与交互src/viewer.js 依据模式server/static/json渲染 HTML 或写出文件server 模式下通过ws建立 WebSocket构建重跑时推送新数据前端 client/store.js 的 MobX store 驱动 chunk 过滤、搜索、尺寸切换与暗色主题。升级关注点Breaking Changes 汇总根据 CHANGELOG升级时需要重点检查的破坏性变更如下版本破坏性变更影响5.0.0Node 最低版本提升至 20.9.0旧 Node 环境无法运行 5.x4.0.0Node 最低版本 10.13.0Webpack 5 支持旧 Node 6/8 项目需先升级 Node3.0.0Node 最低版本 6.14.4拼接模块内容默认隐藏报告默认视图发生变化需手动开启复选框2.0.0UI 完全重写侧边栏交互方式变化鼠标移到左下角唤出此外5.2.0 引入的 zstd 能力有运行时前提需要 Node.js 支持zlib.createZstdCompress官方文档标注为 Node 22.15.0。当环境不满足时CLI 会自动把--compression-algorithm的可选值收敛为gzip、brotli。结语纵观 CHANGELOGwebpack-bundle-analyzer 的版本演进呈现清晰的脉络1.x 解决能否分析2.x 解决分析得准不准 能不能实时3.x 把交互体验打磨成熟4.x 面向 Webpack 5 与超大规模项目做性能和依赖瘦身5.x 则对齐 Node 20、引入 Brotli/zstd 压缩算法并兼容 Rspack 2.0。对于使用者而言理解这条演进线有助于在升级时精准评估 Breaking Change 的影响对于想为该项目贡献的开发者仓库中的 CONTRIBUTING.md、test/ 下的测试 bundle 与 stats 样例则是研究其解析与渲染实现的现成教材。赞分享【免费下载链接】webpack-bundle-analyzerWebpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap项目地址https://gitcode.com/gh_mirrors/we/webpack-bundle-analyzer点击查看免费下载相关推荐Tremor Tooltip 组件演进全解析从 changelog 版本变更到源码级实现原理Tremor Tooltip 组件演进全解析从 changelog 版本变更到源码级实现原理 Tremor 是用于构建图表与仪表盘的 React 组件库而UI组件图表库前端Plausible Analytics Tracker 演进全解从 0.2.2 到 0.4.6 的版本变更与源码级实现原理Plausible Analytics Tracker 演进全解从 0.2.2 到 0.4.6 的版本变更与源码级实现原理 导读 本文以 Plausible后端数据分析数据可视化Tinymce 表格模型引擎 Snooker 版本演进全解析从 CHANGELOG 到源码级实现原理Tinymce 表格模型引擎 Snooker 版本演进全解析从 CHANGELOG 到源码级实现原理 导读 snooker 是 Tinymce 生态中负责 表前端富文本上一篇Godot 六边形地图实战hexagonal_map 演示中 TileMap/TileSet 的构建与角色移动下一篇Langfuse API 路由性能实践在 Next.js 服务端消除异步瀑布链创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
