3个数字看透前端性能：webpack-bundle-analyzer中的size定义深度解析
项目地址: https://gitcode.com/gh_mirrors/we/webpack-bundle-analyzer 你是否也曾在优化前端项目时困惑于这三个数字的真正含义？为什么构建工具显示的包体积与浏览器加载的大小总是对不上？本文将彻底厘清stat、parsed与gzip三种尺寸的计算逻辑，通过src/analyzer.js与src/sizeUtils.js的核心代码解析，帮你掌握前端性能优化的关键衡量标准。
stat size：源代码的"真实体重"
stat size代表模块的原始代码体积，对应Webpack统计信息中module.size字段。这个数值直接反映源代码未经任何处理的大小，包括所有空格、注释和未压缩的语法结构。在src/analyzer.js第148行可以看到，stat size通过累加所有模块的原始大小计算得出：
size: unparsedEntryModules.reduce((totalSize, module) => totalSize + module.size, 0),
应用场景：stat size主要用于开发阶段分析模块间的依赖关系和代码占比，帮助识别大型依赖包。例如在test/stats/webpack-5-bundle-with-single-entry/stats.json中，每个模块的size字段记录的就是stat size。
parsed size：编译后的"实际体积"
parsed size是经过Webpack处理（如代码转换、模块合并）后的代码体积，不包含压缩优化。在src/analyzer.js第113行，通过Buffer.byteLength计算解析后的代码长度：
asset.parsedSize = Buffer.byteLength(assetSources.src);
parsed size反映了代码经过转译和打包后的实际大小，是评估构建过程对代码体积影响的重要指标。当使用Babel等转译工具时，这个数值通常会大于stat size，因为会引入polyfill和辅助代码。
关键差异：与stat size不同，parsed size已经去除了Webpack runtime代码（src/analyzer.js第90行的runtimeSrc单独处理），更接近浏览器实际解析的代码体积。
gzip size：网络传输的"最终体重"
gzip size是经过gzip压缩后的代码体积，直接决定用户实际下载的流量大小。在src/sizeUtils.js第4行，使用zlib模块进行最高级别(level:9)的gzip压缩：
if (compressionAlgorithm === 'gzip') return zlib.gzipSync(input, {level: 9}).length;
压缩逻辑：webpack-bundle-analyzer默认使用最高压缩级别，这可能比生产环境服务器的压缩级别更高。在src/analyzer.js第114行，可以看到如何将解析后的代码传入压缩函数：
if (compressionAlgorithm === 'gzip') asset.gzipSize = getCompressedSize('gzip', assetSources.src);
三种尺寸的实战对比
| 尺寸类型 | 计算时机 | 典型应用场景 | 与用户体验关系 |
|---|---|---|---|
| stat size | 源代码阶段 | 依赖分析、模块设计 | 无直接关系 |
| parsed size | 构建后，压缩前 | 构建优化效果评估 | 影响解析时间 |
| gzip size | 压缩后 | 网络性能优化 | 直接影响加载速度 |
在实际项目中，这三种尺寸呈现典型的递减关系：stat size > parsed size > gzip size。例如一个包含大量注释和空格的100KB源代码文件，经过解析后可能变为80KB（parsed size），gzip压缩后可能只有25KB（gzip size）。
优化决策指南
- 优先关注gzip size：直接影响用户加载速度，是性能优化的核心目标
- 解析parsed size异常：如果parsed size远大于stat size，检查是否引入了不必要的转译或polyfill
- 控制stat size增长：通过src/analyzer.js第227行的createModulesTree构建的模块树，识别大型依赖并考虑代码分割
通过理解这三种尺寸的计算逻辑和应用场景，你可以更精准地定位前端性能瓶颈。结合webpack-bundle-analyzer提供的交互式树状图（client/components/Treemap.jsx），能够直观地识别哪些模块对各尺寸贡献最大，从而制定更有效的优化策略。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
