Tim的资源站分析构建的统计信息是更好地理解 Webpack 的一个好方法。可视化 Webpack 输出可帮助您了解打包结果的组成。
配置 Webpack
要获得合适的输出，您需要对配置进行一些调整。至少应该传入 --json 标记并将输出保存为文件，如下所示：
package.json
"scripts": {
"build:stats": "webpack --env production --json > stats.json",
...
},
无论您的 Webpack 配置如何，以上是您需要的基本设置。现在执行 npm run build:stats。过一会儿，你应该可以在你的项目根目录找到 stats.json 文件。我们可以通过各种工具来分析此文件，以更好地了解正在发生的事情。
您还可以考虑使用以下标记：
--profile捕获与时间相关的信息。该设置是可选的，但值得一试。--progress显示 Webpack 在构建的不同阶段花了多长时间。
要理解 Webpack 在构建过程中为什么会包含特定模块，请使用 whybundled 或 webpack-why，
--display-reasons标记也提供了许多相关信息。例如：npm run build -- --display-reasons。
鉴于您在当前设置中需要考虑生产环境，所以构建过程会清理构建目录！如果您想避免这种情况，需要额外调整配置。
Node API
我们还可以通过 Node 获取统计信息。由于统计信息可能包含错误，因此我们需要对其进行分情况处理：
const webpack = require("webpack");
const config = require("./webpack.config.js")("production");
webpack(config, (err, stats) => {
if (err) {
return console.error(err);
}
if (stats.hasErrors()) {
return console.error(stats.toString("errors-only"));
}
console.log(stats);
});
如果您想对统计数据进行进一步处理，上面这种技术可能很有价值，尽管其他解决方案已经足够了。
如果您想要 JSON 格式的输出，请使用
stats.toJson()。要想获得_详细_输出，请使用stats.toJson("verbose")。它遵循 Webpack 支持的所有 stat 选项。
如果要模仿
--json标记产生的结果，请使用console.log(JSON.stringify(stats.toJson(), null, 2));，输出会以可读的方式进行格式化。
StatsWebpackPlugin 和 WebpackStatsPlugin
如果您想通过插件管理统计数据，请查看 stats-webpack-plugin。它使您可以更多地控制输出。您可以使用它从输出中排除特定的依赖项。
webpack-stats-plugin 是另一种选择。它允许您在输出数据之前转换数据。
启用性能预算
Webpack 允许您定义性能预算。基于这个设想，它给出了你必须遵循的构建大小约束。默认情况下禁用该功能，并且构建大小的计算包括 chunk 块和入口块。如果未满足预算并且已将其配置为一种构建错误，则会终止整个构建。
要将该功能集成到项目中，请调整配置：
webpack.config.js
const productionConfig = merge([
{
performance: {
hints: "warning", // "error" 或者 false 都是有效值
maxEntrypointSize: 50000, // 以字节为单位, 默认为 250k
maxAssetSize: 450000, // 以字节单位
},
},
...
]);
实际情况下，您可能希望保持一个预算的下限值，目前的例子足够进行演示了。如果你现在执行构建（npm run build），你应该看到一个警告：
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (48.8 KiB). This can impact web performance.
Entrypoints:
main (103 KiB)
manifest.3fd9a1eb.js
manifest.d41d8cd9.css
vendor.0a4df2ff.js
vendor.3dd53418.css
main.9043ef51.js
main.d5d711b1.css
您可以增加预算的大小或删除配置以消除警告。一个有吸引力的选择是用更轻的方案来替换 React，如使用包章节中所述。
可用的分析工具
尽管查看文件本身可以让您了解正在发生的事情，但通常最好使用特定的工具。
官方分析工具
官方分析工具会根据应用的依赖关系图给您一些好的建议，它也可以在本地运行。
Webpack Visualizer
Webpack Visualizer 提供了一个饼图，显示了您的包的构成，可以了解每个依赖在整体结果中所占的大小。
DuplicatePackageCheckerPlugin
如果在构建中多次找到单个包，duplicate-package-checker-webpack-plugin 会发出警告。否则，很难发现这个问题。
Webpack 图表
Webpack Chart 是另一种类似的可视化工具。
webpack-unused
webpack-unused 打印出未使用的文件，可用于了解哪些资源不再使用，可以从项目中删除。
Stellar Webpack
Stellar Webpack 提供类似于宇宙星系的视觉效果，允许您以 3D 形式检查应用程序。
webpack-bundle-tracker
webpack-bundle-tracker 可以在 Webpack 编译时捕获数据，并把这些数据以 JSON 格式输出。
webpack-bundle-analyzer
webpack-bundle-analyzer 提供打包内容的交互式树形图。
webpack-bundle-size-analyzer
webpack-bundle-size-analyzer 提供了文本形式的打包结果统计信息。
$ webpack-bundle-size-analyzer stats.json
react: 93.99 KB (74.9%)
purecss: 15.56 KB (12.4%)
style-loader: 6.99 KB (5.57%)
fbjs: 5.02 KB (4.00%)
object-assign: 1.95 KB (1.55%)
css-loader: 1.47 KB (1.17%)
<self>: 572 B (0.445%)
inspectpack
inspectpack 可用于确定哪些位置的代码可以改进。以下示例执行了重复分析：
$ inspectpack --action=duplicates --bundle=bundle.js
## Summary
* Bundle:
* Path: /PATH/TO/bundle.js
* Bytes (min): 1678533
* Missed Duplicates:
* Num Unique Files: 116
* Num Extra Files: 131
* Extra Bytes (min): 253955
* Pct of Bundle Size: 15 %
jarvis
Jarvis 是一个用户界面，旨在显示与您的 Webpack 构建相关的所有信息。例如，它显示了 Tree Shaking 可以过滤掉的模块数量，以及在不同的连接类型下资源的表现情况。
webpack-runtime-analyzer
webpack-runtime-analyzer 对 Webpack bundle 进行实时分析。您可以在用户界面查看各种格式的包的组成情况、大小和模块详细信息。它将上述许多工具的功能组合到一个工具中。
webpack-monitor
Webpack Monitor 是另一个类似的工具，用户界面非常的清晰。它能够提供有关改进构建的建议。
webpack-deps-tree
webpack-deps-tree 显示 Webpack 模块图。使用它，您可以了解包中的模块是如何相互关联的。
重复分析
除了 inspectpack 之外，还有其他工具可用于计算重复项：
- bundle-duplicates-plugin 用于检查重复的函数。
- find-duplicate-dependencies 用于检查重复的 npm 包。
- 如果项目中缺少依赖项或依赖项重复，depcheck 会发出警告。
- bundle-buddy 可以在bundle 中找到重复项，同时提供用户界面来调整 webpack 代码拆分行为。bundle-buddy-webpack-plugin 使其更易于使用。
独立工具
除了使用与 Webpack 输出相关的工具以外，还有一些与 Webpack 无关的独立工具。
source-map-explorer
source-map-explorer 是一个独立于 Webpack 的工具。它允许您使用源映射深入了解您的构建。它通过可视化的树图，显示了代码在整体结果中占比情况。
madge
madge 是另一种可以根据模块构成输出图形的独立工具。图形输出允许您更详细地了解项目内部的依赖关系。
总结
当您优化打包输出的大小时，这些工具是非常宝贵的。官方工具具有最多功能，但可视化工具更容易揭示问题点，你会很容易看到它们的组成。
回顾一下：
- Webpack 允许您提取包含有关构建的信息的 JSON 文件。其中的数据包括构建组成和时间。
- 可以使用各种工具分析生成的数据，这些工具可以深入了解打包组成等方方面面。
- 性能预算允许您限制构建的大小。设置预算使开发人员更容易意识到生成的包的大小。
- 理解打包结果是了解如何优化整体规模，加载内容和时间的关键。它还可以揭示更重要的问题，例如冗余数据。
- 您可以找到不依赖于 Webpack 但仍对分析有价值的第三方工具。
您将在下一章中学习如何调整 Webpack 性能。
