@silesia-corporation/webpack-css-stats-plugin 是一个可以用于统计 webpack 构建的 CSS 样式文件大小、数量等信息的插件。它可以帮助前端开发者更好地了解自己的项目，优化项目的性能。
本文章将介绍如何使用 @silesia-corporation/webpack-css-stats-plugin，并带领读者深入了解此插件的实现原理。
安装
使用 npm 进行安装：
npm install @silesia-corporation/webpack-css-stats-plugin
使用
配置 webpack
在 webpack 配置文件中引入 @silesia-corporation/webpack-css-stats-plugin 并配置：
-- -------------------- ---- -------
----- -------------- - ---------------------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
--------- -----------------
------- -------
--
-
--配置项说明：
filename：导出的文件名，可以为任意字符串，默认为css-stats.json。sortBy：导出数据的排序方式，可选值包括gzipSize、size和rules，默认为gzipSize，按 CSS 文件的 gzip 压缩文件大小从大到小排序。
查看结果
构建完成后，在项目根目录下会生成一个 css-stats.json 文件，内容类似于：
-- -------------------- ---- -------
-
---------- --------
------------ --------------
------- -
-------- -
-
------- ------------
------- ------
----------- -----
-------- ---
--------------- ----
------------ --
--
-
------- -------------
------- -----
----------- ----
-------- --
--------------- ---
------------ --
-
--
--------- -
------- ------
----------- -----
-------- ---
--------------- ----
------------ --
-
-
-其中，
files包含了所有 CSS 文件的信息，包括文件名、文件大小、gzip 压缩文件大小、CSS 规则数量、CSS 声明数量和 CSS 选择器数量。totals包含了所有 CSS 文件信息的合计。
解读结果
通过导出的 css-stats.json 文件，我们可以对项目的 CSS 文件进行深入分析。比如，在 files 中找到 CSS 规则数量最多的文件，查看其规则数量是否超过了预期，是否可以进一步优化；通过查看 totals 中的 size 和 gzipSize，可以了解项目中 CSS 文件所占用的大小，是否超过了前端性能优化的界限。
实现原理
@silesia-corporation/webpack-css-stats-plugin 插件的实现原理其实很简单：通过 webpack 提供的 Compilation 插件，在 webpack 构建过程的不同时期统计 CSS 文件的信息，最终生成一个 JSON 文件。插件的源码类似于：
-- -------------------- ---- -------
----- -------------- -
------------------- - --- -
------------ - ---------------
--------- -----------------
------- ----------
-- ---------
-
--------------- -
----------------------------------------- ----------- -- -
----- ----- - - -------- -------- ---------- ----------- ----- - ------ --- ------- -- - --
----- --------- - ---------------------------------------------- -- --------------------
----- ------- - ------------------- -- ------------------------------------------ - ----- ---------- ----
-- -- --- ----
------------------------- -- -- -
----- --- - -----------
----- ---- - - ----- ----------- ----- ------------- --------- ------------------------------ ------ -- ------------- -- ---------- - --
------------------ -- -
-------------
----------------- -- ---------------------- -- --------- --- ---------------
-------------- -- ----------------------
---
----------------------------
---
-- -- --- ------
----------------- - ------------------------------ -------- -- -
--- ------ --- -- ----- -
--------- -- -------------
-
------ -----
-- - ----- -- --------- -- ------ -- ------------- -- ---------- - ---
-- --------
------------------------- -- -- ---------------------- - ------------------------
-- -- ---- --
----------------------------------------- - -
-------- -
------ ----------------------
--
------ -
------ -----------------------------
-
--
---
-
-代码比较简短，可以看出其实现原理就是基于 postcss-parse 解析 CSS 文件，分别统计得出每个 CSS 文件的信息，最后生成 JSON 文件。其中，通过给 webpack 的 Compilation 插件添加 emit 钩子实现了在 webpack 构建过程不同阶段运行插件的目的。
总结
通过本文，我们了解了 @silesia-corporation/webpack-css-stats-plugin 插件的用法和实现原理。在实际开发中，通过统计 CSS 文件的大小、数量等信息，可以更好地了解项目的状态，帮助开发者优化项目性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d781e8991b448e0344