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