在前端开发中，我们通常会使用大量的 CSS 样式表来美化网站或应用程序。然而，这些样式表可能包含了很多未使用的 CSS 代码，这些未使用的 CSS 代码不仅浪费了文件大小，还可能导致性能问题和代码混乱。
为了解决这个问题，我们可以使用一个叫做 purify-css 的 npm 包。这个包可以帮助我们剔除未使用的 CSS 代码，并生成一个更小、更干净的 CSS 文件。
安装 purify-css
要使用 purify-css，首先需要安装它。你可以使用 npm 命令来安装：
npm install -g purify-css
上面的命令将全局安装 purify-css，这样你就可以在任何项目中使用它了。
剔除未使用的 CSS
安装完成后，我们可以使用以下命令来剔除未使用的 CSS 代码：
purifycss <css文件路径> <html/js文件路径> -o <输出路径>
其中：
<css文件路径>指定要处理的 CSS 文件路径。<html/js文件路径>指定包含 CSS 类名和 ID 的 HTML 或 JavaScript 文件路径。-o参数指定输出路径，可以是一个新的 CSS 文件或者替换原有的 CSS 文件。
以下是一个示例命令：
purifycss src/styles/main.css src/index.html -o src/styles/purified.css
这个命令将会剔除 main.css 文件中未使用的 CSS 代码，并将结果输出到 purified.css 文件中。
注意，purifycss 命令只能处理静态 HTML 或 JavaScript 文件。如果你的项目是一个动态生成 HTML 的单页应用程序，则需要先将 HTML 文件生成后再使用 purifycss 处理。
使用 purify-css with webpack
如果你在使用 webpack 构建你的项目，则可以使用 purifycss-webpack 插件来自动化剔除未使用的 CSS 代码。这样，在构建过程中就会自动执行 purify-css，而不需要手动运行命令。
以下是一个配置示例：
-- -------------------- ---- -------
----- --------------- - -----------------------------
----- ---- - ----------------
-------------- - -
-- ---
-------- -
--- -----------------
------ --------------------------------- - ------ ---- ---
---
--
--在上面的示例中，我们首先引入了 PurifyCSSPlugin 和 glob 模块。然后，在 plugins 数组中添加了一个新的 PurifyCSSPlugin 实例，并传递了一个 paths 参数，该参数指定要搜索包含 CSS 类名和 ID 的文件路径。
在这个示例中，glob.sync() 方法被用来搜索所有的 JavaScript 文件，以便找到包含 CSS 类名和 ID 的文件。
总结
通过使用 purify-css，我们可以轻松地剔除未使用的 CSS 代码，从而生成更小、更干净的 CSS 文件，提高网站或应用程序的性能和可维护性。无论你是手动运行命令还是使用 webpack 插件自动化处理，都可以轻松地在项目中使用 purify-css。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47959