webpack stats 详解通过stats: detailed预设输出深度编译报告【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack在 webpack 中stats选项负责控制构建完成后打印到终端或通过Stats对象导出的统计信息格式与详细程度。本仓库webpackJavaScript 及其生态的模块打包器在 examples/stats-detailed 中提供了一个最精简的示例仅一行console.log(Hello World!)的入口文件配合stats: detailed配置用于演示详细模式下 stats 报告的输出形态。读完本文你将理解detailed预设由哪些选项构成、它的输出每一段分别代表什么含义、与normal/verbose等预设的差异以及如何在配置、命令行与 JavaScript API 三个层面按需定制 stats 输出。示例总览最小项目与它的完整编译信息该示例共有两个源文件加一份由构建自动产出的产物入口模块 examples/stats-detailed/example.js内容只有一行console.log(Hello World!);代表一个带副作用side effects但无导出no exports的最简单模块。配置文件 examples/stats-detailed/webpack.config.js指定产物输出到dist/output.js并把stats设为字符串预设detailed。use strict; const path require(path); /** type {import(webpack).Configuration} */ const config { output: { path: path.join(__dirname, dist), filename: output.js }, stats: detailed }; module.exports config;构建产物 examples/stats-detailed/README.md 中展示的dist/output.js是一个 28 字节的精简 bundle外层是 webpack 自带的webpackBootstrapIIFE模块注释!*** ./example.js ***!标明了模块路径其下方标注/*! unknown exports (runtime-defined) */该模块是 CommonJS 风格、导出由运行时决定与/*! runtime requirements: */该模块自身无额外运行时要求随后是压缩后的业务代码本身。这个示例说明即便构建逻辑简单到极致detailed预设也会在终端打印出一份分层的、带有模块级诊断与插件内部日志的深度报告。理解这份报告正是掌握 webpack 编译全流程的捷径。detailed预设的组成从源码看它打开了哪些开关字符串形式的stats值在 webpack 内部被称为预设preset。源码 lib/stats/DefaultStatsPresetPlugin.js 中的NAMED_PRESETS对象集中定义了全部预设verbose、detailed、minimal、errors-only、errors-warnings、summary、none加上默认的normal。其中detailed预设lib/stats/DefaultStatsPresetPlugin.js等价于一次性开启下列选项选项detailed 取值作用hashtrue显示本次编译的哈希builtAttrue显示构建完成时间戳relatedAssetstrue显示与资产相关的额外资产如 source mapentrypointstrue显示每个入口点的资产构成chunkGroupstrue显示 chunk group 结构idstrue显示模块 / chunk 的数值 idchunkstrue逐 chunk 列出chunkRelationstrue显示 chunk 之间的父子引用关系chunkOriginstrue显示每个 chunk 的创建来源depthtrue显示模块在依赖图中的深度usedExports/providedExportstrue显示模块被使用 / 提供的导出optimizationBailouttrue显示为何未能进行优化如 scope hoisting 失败原因errorDetails/errorCause/errorErrorstrue展开错误详情、错误原因与错误栈publicPathtrue显示 publicPath本示例中为相对产物路径dist/loggingtrue输出插件内部日志详见下文 LOG 段runtimeModulestrue把运行时模块计入模块列表errorsSpace/warningsSpace/modulesSpace/assetsSpace/reasonsSpace1000各类条目最多显示 1000 条相较默认 15 条的折叠窗口极大放宽excludefalse不排除任何模块正是因为这些开关被整体拉高detailed报告比默认的normal长得多常用于排障、性能分析与理解模块图。从配置到报告stats 的解析与渲染链路在源码层面字符串预设真正生效的路径如下用户在配置中写stats: detailed。编译期createStatsOptionslib/Compilation.js把字符串/布尔值包装成{ preset: detailed }这样的对象字符串会被归一化为{ preset: 字符串 }布尔值false/true分别映射为preset: none/preset: normal。若存在preset触发compilation.hooks.statsPreset.for(preset)钩子DefaultStatsPresetPlugin.js 正是通过 tap 这个钩子把NAMED_PRESETS.detailed里的每一项applyDefaults写入待归一化选项。随后statsNormalize钩子把剩余未指定的选项用DEFAULTSlib/stats/DefaultStatsPresetPlugin.js补齐完成归一化。打印阶段Stats.toStringlib/Stats.js使用StatsFactory把 Compilation 抽取为结构化数据再用StatsPrinter格式化为终端文本——注意toString传入forToString: true因此许多auto类默认项如errorDetails会按面向终端展示的方式展开若用stats.toJson()导出机器可读 JSON则走forToString: false的另一套逻辑。可以推断这份detailed预设本质上是在normal之上覆盖了一批高信息量开关而非从零构建的全新配置因为每个预设都只声明自己需要覆盖的字段其余字段全部回落到DEFAULTS。逐段解读示例中的详细输出examples/stats-detailed/README.md 中# Info → Production mode一节展示了完整运行输出下面逐段说明。全局资产与入口点行PublicPath: dist/ asset output.js 28 bytes {792} [emitted] [minimized] (name: main) Entrypoint main 28 bytes output.jsPublicPath: dist/由publicPath: true打印此处是输出目录相对路径。asset output.js ... {792}{792}是资产所属 chunk 的 id[emitted]表示该资产是新产出未被缓存复用[minimized]表示经过压缩production 模式的默认行为。Entrypoint main 28 bytes output.js入口点main的最终产物构成。chunk 与模块明细行chunk {792} (runtime: main) output.js (main) 29 bytes [entry] [rendered] ./example.js main ./example.js [695] 29 bytes {792} [depth 0] [built] [code generated] [no exports used] Statement (ExpressionStatement) with side effects in source code at 1:0-28 ModuleConcatenation bailout: Module is not in strict modechunk {792} ... [entry] [rendered]id 为 792 的入口 chunk归属于 runtimemain[rendered]指已完成代码生成阶段。 ./example.js mainchunkOrigins开启后显示的 chunk 来源——由模块./example.js的main入口创建。./example.js [695] 29 bytes {792} [depth 0] [built] [code generated]模块路径、数值 id、大小、所属 chunk、[depth 0]位于依赖图根层、[built]已完成构建、[code generated]已完成代码生成。示例中的29 bytes与产物 28 bytes 的差异来自模块注释等描述信息不计入产物。[no exports used]usedExports结果显示没有使用任何导出模块确实也无导出。Statement (ExpressionStatement) with side effects in source code at 1:0-28这是optimizationBailout结合 side-effects 分析的输出指出第 1 行 0-28 列存在带副作用的表达式语句因此该语句不可被 tree shaking 删除。ModuleConcatenation bailout: Module is not in strict modescope hoisting模块拼接优化在此模块上失败的明确原因——模块不在严格模式下。这正是optimizationBailout: true的价值它把为什么没被优化直接打印出来。插件内部日志段输出末尾是若干LOG from webpack.xxx分组这是logging: truenormal下默认仅info级且多隐藏打开的结果LOG from webpack.Compilation 1 modules hashed, 0 from cache (1 variants per module in average) 100% code generated (1 generated, 0 from cache) 24 hidden lines LOG from webpack.FlagDependencyExportsPlugin 0% of exports of modules have been determined (...) LOG from webpack.buildChunkGraph 2 queue items processed (1 blocks) 0 chunk groups connected ... LOG from webpack.FileSystemInfo 1 new snapshots created File info in cache: 1 timestamps 1 hashes 1 timestamp hash combinations ...webpack.Compilation哈希hashed、代码生成code generated等核心阶段的统计。webpack.FlagDependencyExportsPlugin依赖导出标记插件的进展本示例仅 1 个无声明导出模块因此完成度 0% 属正常。webpack.buildChunkGraphchunk 图构建过程queue 处理、chunk group 合并等。webpack.FileSystemInfo文件系统快照与缓存命中情况——这是 webpack 持久化缓存文件系统缓存是否生效的直接观察窗口。 N hidden lines每组日志默认只展示摘要行其余折叠。若想看到全部日志可配合infrastructureLogging.level或进一步放宽日志级别。末行webpack X.X.X compiled successfully (...)即hashbuiltAt两选项渲染出的完成摘要。命令行与 JavaScript API三种启用方式stats不止能写在配置里还存在两种等价入口配置文件如本示例在 webpack.config.js 中写stats: detailed也支持对象形式例如stats: { chunks: true, reasons: true }。命令行CLI使用--stats detailed或针对单个开关的旗标如--stats-error-details、--stats-chunks临时覆盖配置这类旗标的具体错误详情提示可参考 lib/stats/DefaultStatsPrinterPlugin.js 中对stats.errorDetails的说明。JavaScript API当通过编程方式使用 webpack 时拿到stats对象后调用stats.toString(detailed)可得到与终端一致的文本调用stats.toJson(detailed)可得到对应的结构化 JSON二者皆会走上述createStatsOptions的归一化流程lib/Stats.js。另外需要说明所有预设均可与对象形式混用例如stats: { preset: detailed, excludeModules: [/node_modules/] }预设铺底、再按需覆盖。同样的预设体系还支撑了仓库内 examples/stats-minimal、examples/stats-normal、examples/stats-summary、examples/stats-none 等系列示例它们与本示例共用同一份example.js只替换stats取值即可直观对比不同预设的输出量级。detailed与其它预设的取舍建议预设信息量典型用途none几乎为零只需要 exit code / 错误码的静默构建summary仅版本与错误/警告计数CI 里最简洁的健康检查errors-only/errors-warnings仅错误及警告关注失败原因minimal精简资产与错误摘要日常开发默认输出之上的一档收敛normalwebpack 默认输出大多数场景的默认选择detailed资产、chunk、模块、导出、bailout、内部日志全开分析模块图、tree shaking / scope hoisting 失效原因、缓存命中verbose在 detailed 基础上再开reasons、chunkModules、orphanModules等最彻底的诊断输出量最大实际使用建议日常构建用默认normal或minimal即可当需要排查某个模块为什么没被打包进预期 chunk为什么某段代码没被摇树scope hoisting 为何被降级这类问题时切到detailed重点看模块条目下方的[no exports used]、with side effects与ModuleConcatenation bailout行以及各LOG from ...分组的缓存统计。示例仓库把这些场景沉淀为可独立运行的最小案例见 examples 目录下的stats-*系列读者可直接对任意一个目录执行构建复现本文输出。【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 webpack stats 详解：通过 `stats: “detailed“` 预设输出深度编译报告
webpack stats 详解通过stats: detailed预设输出深度编译报告【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack在 webpack 中stats选项负责控制构建完成后打印到终端或通过Stats对象导出的统计信息格式与详细程度。本仓库webpackJavaScript 及其生态的模块打包器在 examples/stats-detailed 中提供了一个最精简的示例仅一行console.log(Hello World!)的入口文件配合stats: detailed配置用于演示详细模式下 stats 报告的输出形态。读完本文你将理解detailed预设由哪些选项构成、它的输出每一段分别代表什么含义、与normal/verbose等预设的差异以及如何在配置、命令行与 JavaScript API 三个层面按需定制 stats 输出。示例总览最小项目与它的完整编译信息该示例共有两个源文件加一份由构建自动产出的产物入口模块 examples/stats-detailed/example.js内容只有一行console.log(Hello World!);代表一个带副作用side effects但无导出no exports的最简单模块。配置文件 examples/stats-detailed/webpack.config.js指定产物输出到dist/output.js并把stats设为字符串预设detailed。use strict; const path require(path); /** type {import(webpack).Configuration} */ const config { output: { path: path.join(__dirname, dist), filename: output.js }, stats: detailed }; module.exports config;构建产物 examples/stats-detailed/README.md 中展示的dist/output.js是一个 28 字节的精简 bundle外层是 webpack 自带的webpackBootstrapIIFE模块注释!*** ./example.js ***!标明了模块路径其下方标注/*! unknown exports (runtime-defined) */该模块是 CommonJS 风格、导出由运行时决定与/*! runtime requirements: */该模块自身无额外运行时要求随后是压缩后的业务代码本身。这个示例说明即便构建逻辑简单到极致detailed预设也会在终端打印出一份分层的、带有模块级诊断与插件内部日志的深度报告。理解这份报告正是掌握 webpack 编译全流程的捷径。detailed预设的组成从源码看它打开了哪些开关字符串形式的stats值在 webpack 内部被称为预设preset。源码 lib/stats/DefaultStatsPresetPlugin.js 中的NAMED_PRESETS对象集中定义了全部预设verbose、detailed、minimal、errors-only、errors-warnings、summary、none加上默认的normal。其中detailed预设lib/stats/DefaultStatsPresetPlugin.js等价于一次性开启下列选项选项detailed 取值作用hashtrue显示本次编译的哈希builtAttrue显示构建完成时间戳relatedAssetstrue显示与资产相关的额外资产如 source mapentrypointstrue显示每个入口点的资产构成chunkGroupstrue显示 chunk group 结构idstrue显示模块 / chunk 的数值 idchunkstrue逐 chunk 列出chunkRelationstrue显示 chunk 之间的父子引用关系chunkOriginstrue显示每个 chunk 的创建来源depthtrue显示模块在依赖图中的深度usedExports/providedExportstrue显示模块被使用 / 提供的导出optimizationBailouttrue显示为何未能进行优化如 scope hoisting 失败原因errorDetails/errorCause/errorErrorstrue展开错误详情、错误原因与错误栈publicPathtrue显示 publicPath本示例中为相对产物路径dist/loggingtrue输出插件内部日志详见下文 LOG 段runtimeModulestrue把运行时模块计入模块列表errorsSpace/warningsSpace/modulesSpace/assetsSpace/reasonsSpace1000各类条目最多显示 1000 条相较默认 15 条的折叠窗口极大放宽excludefalse不排除任何模块正是因为这些开关被整体拉高detailed报告比默认的normal长得多常用于排障、性能分析与理解模块图。从配置到报告stats 的解析与渲染链路在源码层面字符串预设真正生效的路径如下用户在配置中写stats: detailed。编译期createStatsOptionslib/Compilation.js把字符串/布尔值包装成{ preset: detailed }这样的对象字符串会被归一化为{ preset: 字符串 }布尔值false/true分别映射为preset: none/preset: normal。若存在preset触发compilation.hooks.statsPreset.for(preset)钩子DefaultStatsPresetPlugin.js 正是通过 tap 这个钩子把NAMED_PRESETS.detailed里的每一项applyDefaults写入待归一化选项。随后statsNormalize钩子把剩余未指定的选项用DEFAULTSlib/stats/DefaultStatsPresetPlugin.js补齐完成归一化。打印阶段Stats.toStringlib/Stats.js使用StatsFactory把 Compilation 抽取为结构化数据再用StatsPrinter格式化为终端文本——注意toString传入forToString: true因此许多auto类默认项如errorDetails会按面向终端展示的方式展开若用stats.toJson()导出机器可读 JSON则走forToString: false的另一套逻辑。可以推断这份detailed预设本质上是在normal之上覆盖了一批高信息量开关而非从零构建的全新配置因为每个预设都只声明自己需要覆盖的字段其余字段全部回落到DEFAULTS。逐段解读示例中的详细输出examples/stats-detailed/README.md 中# Info → Production mode一节展示了完整运行输出下面逐段说明。全局资产与入口点行PublicPath: dist/ asset output.js 28 bytes {792} [emitted] [minimized] (name: main) Entrypoint main 28 bytes output.jsPublicPath: dist/由publicPath: true打印此处是输出目录相对路径。asset output.js ... {792}{792}是资产所属 chunk 的 id[emitted]表示该资产是新产出未被缓存复用[minimized]表示经过压缩production 模式的默认行为。Entrypoint main 28 bytes output.js入口点main的最终产物构成。chunk 与模块明细行chunk {792} (runtime: main) output.js (main) 29 bytes [entry] [rendered] ./example.js main ./example.js [695] 29 bytes {792} [depth 0] [built] [code generated] [no exports used] Statement (ExpressionStatement) with side effects in source code at 1:0-28 ModuleConcatenation bailout: Module is not in strict modechunk {792} ... [entry] [rendered]id 为 792 的入口 chunk归属于 runtimemain[rendered]指已完成代码生成阶段。 ./example.js mainchunkOrigins开启后显示的 chunk 来源——由模块./example.js的main入口创建。./example.js [695] 29 bytes {792} [depth 0] [built] [code generated]模块路径、数值 id、大小、所属 chunk、[depth 0]位于依赖图根层、[built]已完成构建、[code generated]已完成代码生成。示例中的29 bytes与产物 28 bytes 的差异来自模块注释等描述信息不计入产物。[no exports used]usedExports结果显示没有使用任何导出模块确实也无导出。Statement (ExpressionStatement) with side effects in source code at 1:0-28这是optimizationBailout结合 side-effects 分析的输出指出第 1 行 0-28 列存在带副作用的表达式语句因此该语句不可被 tree shaking 删除。ModuleConcatenation bailout: Module is not in strict modescope hoisting模块拼接优化在此模块上失败的明确原因——模块不在严格模式下。这正是optimizationBailout: true的价值它把为什么没被优化直接打印出来。插件内部日志段输出末尾是若干LOG from webpack.xxx分组这是logging: truenormal下默认仅info级且多隐藏打开的结果LOG from webpack.Compilation 1 modules hashed, 0 from cache (1 variants per module in average) 100% code generated (1 generated, 0 from cache) 24 hidden lines LOG from webpack.FlagDependencyExportsPlugin 0% of exports of modules have been determined (...) LOG from webpack.buildChunkGraph 2 queue items processed (1 blocks) 0 chunk groups connected ... LOG from webpack.FileSystemInfo 1 new snapshots created File info in cache: 1 timestamps 1 hashes 1 timestamp hash combinations ...webpack.Compilation哈希hashed、代码生成code generated等核心阶段的统计。webpack.FlagDependencyExportsPlugin依赖导出标记插件的进展本示例仅 1 个无声明导出模块因此完成度 0% 属正常。webpack.buildChunkGraphchunk 图构建过程queue 处理、chunk group 合并等。webpack.FileSystemInfo文件系统快照与缓存命中情况——这是 webpack 持久化缓存文件系统缓存是否生效的直接观察窗口。 N hidden lines每组日志默认只展示摘要行其余折叠。若想看到全部日志可配合infrastructureLogging.level或进一步放宽日志级别。末行webpack X.X.X compiled successfully (...)即hashbuiltAt两选项渲染出的完成摘要。命令行与 JavaScript API三种启用方式stats不止能写在配置里还存在两种等价入口配置文件如本示例在 webpack.config.js 中写stats: detailed也支持对象形式例如stats: { chunks: true, reasons: true }。命令行CLI使用--stats detailed或针对单个开关的旗标如--stats-error-details、--stats-chunks临时覆盖配置这类旗标的具体错误详情提示可参考 lib/stats/DefaultStatsPrinterPlugin.js 中对stats.errorDetails的说明。JavaScript API当通过编程方式使用 webpack 时拿到stats对象后调用stats.toString(detailed)可得到与终端一致的文本调用stats.toJson(detailed)可得到对应的结构化 JSON二者皆会走上述createStatsOptions的归一化流程lib/Stats.js。另外需要说明所有预设均可与对象形式混用例如stats: { preset: detailed, excludeModules: [/node_modules/] }预设铺底、再按需覆盖。同样的预设体系还支撑了仓库内 examples/stats-minimal、examples/stats-normal、examples/stats-summary、examples/stats-none 等系列示例它们与本示例共用同一份example.js只替换stats取值即可直观对比不同预设的输出量级。detailed与其它预设的取舍建议预设信息量典型用途none几乎为零只需要 exit code / 错误码的静默构建summary仅版本与错误/警告计数CI 里最简洁的健康检查errors-only/errors-warnings仅错误及警告关注失败原因minimal精简资产与错误摘要日常开发默认输出之上的一档收敛normalwebpack 默认输出大多数场景的默认选择detailed资产、chunk、模块、导出、bailout、内部日志全开分析模块图、tree shaking / scope hoisting 失效原因、缓存命中verbose在 detailed 基础上再开reasons、chunkModules、orphanModules等最彻底的诊断输出量最大实际使用建议日常构建用默认normal或minimal即可当需要排查某个模块为什么没被打包进预期 chunk为什么某段代码没被摇树scope hoisting 为何被降级这类问题时切到detailed重点看模块条目下方的[no exports used]、with side effects与ModuleConcatenation bailout行以及各LOG from ...分组的缓存统计。示例仓库把这些场景沉淀为可独立运行的最小案例见 examples 目录下的stats-*系列读者可直接对任意一个目录执行构建复现本文输出。【免费下载链接】webpackA bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through loaders, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.项目地址: https://gitcode.com/GitHub_Trending/web/webpack创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考