在开发前端项目过程中，我们通常都会使用 CSS 来美化页面样式。但是，有些时候我们可能会使用了一些无用的 CSS 代码，这也会对页面性能产生一定的影响。对于这种情况，我们可以使用 css-purge-loader 这个 npm 包来去掉我们项目中不需要的 CSS 代码，从而提升页面性能。
安装和基本使用
首先，我们需要在项目中安装 css-purge-loader：
npm install css-purge-loader --save-dev
安装完成后，我们需要在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-------------------
---------------
------------
-
-
-
-在这里，我们使用了 webpack 的 loader，先通过 css-purge-loader 去掉无用的 CSS 代码，然后再使用 style-loader 和 css-loader 把 CSS 代码加入到我们的页面中。
配置选项
css-purge-loader 支持一些配置选项，以满足我们更多的需求。下面是一些常用的配置选项和它们的解释：
whitelist：一个正则表达式数组，匹配的选择器不会被删除。whitelistPatterns：一个正则表达式数组，匹配的选择器不会被删除。whitelistPatternsChildren：一个正则表达式数组，匹配的选择器的子元素不会被删除。keepSpecialComments：保留特殊注释。
例如，下面是一个使用了 whitelist 配置选项的 webpack 配置文件示例：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- -------------------
-------- -
---------- -------- -------------
-
--
---------------
------------
-
-
-
-在这个例子中，我们使用了 whitelist 配置选项，保留了 body 和 .container 选择器，其他选择器都会被删除。
示例代码
下面是一个使用了 css-purge-loader 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ----------
----- ---------------- -----------------
-------
------
---- ------------------
-------- ---------------------
------------------- -------- --- --------- --- --------------
------
-------
--------- -------------------- ---- ------- -- --------- -- -- ---- - ------- -- -------- -- ------------ ----------- - ---------- - ---------- ------ ------- - ----- -------- ----- ----------------- -------- ----------- - - ---- ------- -- -- ----- - -- - ----------- -- ---------- ----- ----------- ------- - - - ---------- ----- ------------ ---- ------------ ---- -
在这个例子中，我们首先在 HTML 文件中引入了 style.css 文件，在 CSS 文件中定义了一些样式，其中包括无用的选择器。然后，在 webpack 配置文件中使用了 css-purge-loader 去掉了这些无用的选择器。
总结
使用 css-purge-loader 可以有效地去掉项目中的无用 CSS 代码，从而提升页面性能。通过配置选项，我们可以进一步满足我们的需求。在实际开发中，我们应该根据需要灵活配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d381e8991b448d4df4