简介
在前端开发中，CSS 是必不可少的一部分。但是很多时候开发者在编写 CSS 时会因为需求变更导致 CSS 代码中存在无用的选择器，甚至可能有一些未使用的样式存在，这些都会导致页面加载变得缓慢，因此需要对 CSS 进行清理。
本文将介绍一个 npm 包，purifycss-extended，可以对 CSS 进行清理，帮助我们减少 CSS 代码的大小。
安装
使用以下命令进行 purifycss-extended 的安装：
npm install purifycss-extended --save-dev
使用方法
purifycss-extended 的基本使用方法非常简单，只需在 JavaScript 中引入包并调用即可。以下是一个示例代码：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------ - ------------------------------ ----- ------- - ----------------------------- -------- ----- --- - ---------------------------- -------- ----- ------- - - ------- ------------- --------- ---- -- ----- -------- - --------------- ---- ---------
以上代码中，我们首先引入了 fs 和 purifycss-extended 包，并读取了 index.html 和 style.css 的内容。接着对 purifycss-extended 加载的两个参数分别传入了 HTML 文件和 CSS 文件的内容。options 参数是可选的，我们在这里设置了输出文件名以及拒绝未使用的 CSS。
运行后，purifycss-extended 会自动删除在 index.html 中未使用的 style.css 中的样式，只保留用到的选择器，输出结果到 output.css 文件中（当然，你也可以选择覆盖原文件）。
进阶使用
purifycss-extended 支持可配置的选项，让我们可以更灵活地处理 CSS。以下是一些常用的选项和其作用：
whitelist
whitelist 选项可以将某些选择器与样式保留下来，不受清理的影响。比如，如果网站使用了某些 JavaScript 插件，可能需要在样式文件中针对某些选择器进行自定义样式，此时可以在 whitelist 中添加这些选择器，确保它们不会被清除掉。
const whitelist = ['.class1', '#id1', '.class2:hover'];
variables
variables 选项可以帮助我们处理写有变量的 CSS 文件。如果你在 CSS 中使用了变量，且这些变量在 JavaScript 中被用到了，那么在清理过程中这些变量的样式不能被删除。variables 参数接收一个数组，其中内容为这些变量名的字符串。
const variables = ['--main-color', '--font-size'];
minify
minify 选项可以在清理过程中开启 CSS 压缩。这可以帮助我们进一步减小 CSS 文件的大小。开启方法如下：
const options = {
minify: true
};whitelistPatterns
whitelistPatterns 选项可以帮助我们通过正则表达式匹配到某些选择器，然后将其与 CSS 代码保留下来，从而达到一些自定义的需求。以下是一个示例：
const whitelistPatterns = [/^\.widget-/, /^#header/];
以上代码中，选择器以 .widget- 开头或选择器为 #header 的 CSS 代码会被保留。
总结
purifycss-extended 是一款非常方便的 CSS 清理工具，可以帮助我们减小 CSS 文件的大小，提高网页加载速度。在使用时，我们要注意使用一些可选的选项，以便更灵活地控制清理结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63545