前言
在使用 Webpack 进行项目打包时，我们通常需要对打包产物进行分析，以便于后续的优化工作，这时候可以使用 Webpack 提供的 stats 属性来查看构建过程中的统计信息。
但 stats 属性存在一些问题，比如在打包的时候，我们会遇到含有大量图片或其他静态资源的情况，造成 stats 数据庞大，这时候需要一种更加简洁、直观的方式来查看打包情况，这时候就可以使用 build-stats-webpack-plugin 这个 npm 包来解决这些问题。
该文章将介绍如何安装和使用该 npm 包，让你更好的使用 Webpack 进行项目打包分析。
安装
你可以通过 npm 包管理工具来安装 build-stats-webpack-plugin，在终端中输入以下命令：
npm install build-stats-webpack-plugin --save-dev
这条命令将会自动将 build-stats-webpack-plugin 这个包安装到当前项目的 devDependencies 中。
使用
接下来我们将演示如何在项目中使用 build-stats-webpack-plugin，假设你已经熟悉了 Webpack 相关的配置，那么将该插件引入到 Webpack 配置文件中十分方便，在配置文件的 plugins 数组中添加该插件即可：
-- -------------------- ---- ------- ----- ---------------- - -------------------------------------- -- --- -------------- - - -- --- -------- - --- ------------------ - --展开代码
当 Webpack 构建完成后，将会在项目根目录下生成一个名为 stats.json 的文件，该文件包含构建过程中的统计信息。
然而，stats.json 文件包含了所有的信息，阅读起来并不方便，而 build-stats-webpack-plugin 将会自动把该文件解析为一个更加友好和简洁的报告。例如：
Hash: f66bff16184fa7b209a6 Version: webpack 4.43.0 Time: 1664ms Built at: 2020-05-30 11:12:54 AM Asset Size Chunks Chunk Names app.js 147 KiB 0 [emitted] app vendors~app.js 704 bytes 1 [emitted] vendors~app Entrypoint app = app.js
在上述报告中，我们可以看到以下信息：
- 构建所花费的时间；
- 构建产物的各项指标，包括打包后的文件名、文件大小等等。
最重要的是，我们不再需要处理 stats.json 文件，只需运行 Webpack 即可自动生成该报告。
指南
build-stats-webpack-plugin 提供了许多选项，你可以根据你的需求进行自定义配置。
选项
默认情况下，build-stats-webpack-plugin 会把报告输出到控制台，你可以通过传递一些选项来实现更多的修改。
下面来看一个简单的示例：
new BuildStatsPlugin({ output: 'stats.txt' })
在上述示例中，该插件的输出被重定向到一个名为 stats.txt 的文件中。
以下是可用的选项：
| 选项 | 类型 | 描述 |
|---|---|---|
output |
String | 输出文件路径。 |
filter |
Function | 过滤文件的回调函数。将只对通过该函数的文件生成报告。 |
transform |
Function | 对生成的报告输出进行后续修改的回调函数。 |
logOptions |
Object | 输出设置选项，可用选项包括 colors，quiet 和 verbose。 |
reporters |
Array<string> | 可用的报告方式列表。包括 text，json 或者其他符合报告类型声明的报告方式。 |
输出文件
默认情况下，stats.json 会被输出到项目根目录，如果你希望将该文件输出到指定的位置，可以使用 output 选项。
以下示例展示如何将输出文件重定向到项目根目录下的文件夹中：
new BuildStatsPlugin({ output: 'reports/stats.json' })
该插件将会在 reports 文件夹下生成一个名为 stats.json 的文件。
过滤
有时候我们只对构建产物中的某些文件进行分析，此时需要使用过滤器函数。
过滤器函数将会在遍历 stats.json 文件的每一项时被执行，可以自行决定是否需要对该项进行分析和输出。
以下是一个小型示例：
new BuildStatsPlugin({ filter: item => item.size > 10000 })
在上述示例中，我们只输出文件大小大于 10000B 的文件信息。
转换
transform 选项可以用于对需要输出的报告进行条件修改，例如根据一些规则将一些模块合并起来输出。
以下是一个示例：
-- -------------------- ---- ------- --- ------------------ ---------- ----- -- - ----- ---------- - --- ------------------------------ -- - -- ------------------------------- - -- -------------------------- - ----------------------- - - ----- ------------ ----- - -- - ---------------------------- -- ------------ - --- ------ ----------- - --展开代码
在上例中，该插件将会提取所有名为 myLib 的模块，并将它们的大小累加起来。最终输出一个名为 myLib 的信息。
日志输出
build-stats-webpack-plugin 的输出选项可以设置为颜色、静默或详细。默认输出包含颜色。
以下是一个输出颜色的示例：
new BuildStatsPlugin({ logOptions: { colors: true } })
该插件将会使用彩色文本输出报告。
报告
默认情况下，该插件将会把报告输出到控制台。你可以选择将报告输出到指定的文件中，或使用自定义的回调函数来消费它。
以下是使用自定义模块化的方式生成文本报告的一个示例：
const FileReport = require('build-stats-webpack-plugin/dist/reporters/file'); new BuildStatsPlugin({ reporters: [ new FileReport({ output: './my_report.txt' }) ]});
在上述示例中，该插件将会生成一个名为 my_report.txt 的文本文件，内容包含了构建统计信息。
结语
build-stats-webpack-plugin 提供了一种简洁、直观的方式来查看 Webpack 构建过程的统计信息。本文介绍了如何使用该插件来帮助你更加高效的使用 Webpack 进行项目打包分析。
该插件提供了许多选项来自定义报告的树、格式和输出，你可以根据你的需求进行自定义配置，创建符合与你项目需求的报告。
-- -------------------- ---- ------- -- ----------- -- -------- ----- ---- - ---------------- ----- ---------------- - -------------------------------------- -------------- - - ----- -------------- ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- -------- - --- ------------------ ---------- -------- -- - -- -- ------- ----- ------- - ------------------ ----- ------------- - --------------------------- ---------------------- ----- ------ -- - -- ---- -- ------------------ - ---------------- - ---------------------------- ------- ------ -- ----------- ------- ---- -- -------- --- --展开代码
使用该插件可方便的在项目开发过程中进行性能优化跟踪，了解性能瓶颈及解决方案，并且它能够让我们了解我们的项目的构建情况，对我们理解打包运行构建有很好的提升作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bde81e8991b448e58c4
