在前端开发中，有时候我们引入的第三方CSS库包含了许多没有使用到的选择器和样式，这样会使网页加载速度变慢。解决这个问题的方法就是使用 webpack插件：purge-css-loader。
本文将会详细介绍如何使用这个插件，以及它的作用和指导意义。同时也会包含一些使用示例代码，方便大家更好的理解。
什么是purge-css-loader？
purge-css-loader是webpack插件的一种，它用来删除CSS中没有使用到的选择器和样式，从而使CSS文件变得更加精简，加载速度更快。
该插件使用了CSS Purge, 一个可以删除没有使用到的CSS代码的工具。在使用webpack打包时，purge-css-loader会遍历所有源代码文件，寻找与源代码无关的选择器和样式，并将其从最终的CSS文件中删除。
如何使用purge-css-loader？
安装
在使用purge-css-loader之前，你需要先在项目中安装它。你可以在项目中通过npm进行安装。
--- ------- ---------------- ----------
使用
安装了插件之后，就可以开始使用它了。在webpack配置文件中，添加以下代码：
----- -------------- - -----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------
------ --------------------------------- -------------- - ------ ---- ---
---
-- ---
-
-在上面的代码中，我们首先引用了purgecss-webpack-plugin，然后在plugins属性中添加了PurgeCSSPlugin实例。在PurgeCSSPlugin实例中，我们使用了glob.sync()函数，指定了我们的源码路径和要使用的选项。
glob.sync()函数是一个很有用的JavaScript库，用于匹配文件路径的模式。通过使用glob.sync()函数，我们可以指定模式以收集所有的CSS文件。
在我们的webpack配置中，我们让PurgeCSSPlugin遍历所有的文件，并删除没有使用过的CSS代码，从而生成一个新的CSS文件，该CSS文件只包含使用到的CSS代码。
示例代码
下面是一个使用purge-css-loader的简单示例，用于演示如何使用这个工具：
----- ---- - ----------------
----- ----------------- - ---------------------------------------
----- -------------- - -----------------------------------
----- ---- - ----------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- -
-
------- -------------
-------- - -------------- - -
--
-
------- ----------------
-
-
--
-
-
--
-------- -
--- --------------------------------
--- ----------------
------ --------------------------------- -------------- - ------ ---- ---
--
-
--在上面的示例代码中，我们首先引入了需要的所有依赖。然后在module.rules属性中，我们定义了一个loader规则，用于将CSS文件提取到指定的文件中。
在plugins属性中，我们创建了两个新的实例：ExtractTextPlugin和PurgeCSSPlugin。ExtractTextPlugin用于将CSS文件提取到指定的文件中，PurgeCSSPlugin用于删除未使用的CSS代码。
总结
在本文中，我们介绍了如何使用purge-css-loader插件，该插件是一个很有用的工具，可以通过删除未使用的CSS代码使CSS文件变得更加精简，加载速度更快。
在进行实际应用时，你可以根据自己的需要，选择要使用的选项和配置。同时，本文还提供了一个使用purge-css-loader的简单示例代码，让大家更好地理解和应用这个插件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005753681e8991b448ea46f