对比

PurgeCSS 并不是唯一可以删除未使用 CSS 的工具。下面你将找到 PurgeCSS 与另外两个最常用的删除未使用 CSS 的工具的对比。

UnCSS

正如其 README 中所示，UnCSS 的工作方式如下：

• HTML 文件由 jsdom 加载，并执行 JavaScript。
• PostCSS 解析所有样式表。 document.querySelector 过滤出在 HTML 文件中未找到的选择器。
• 剩余的规则被转换回 CSS。

由于其 HTML 模拟和 JavaScript 执行，UnCSS 在删除 Web 应用程序中未使用的选择器方面非常有效。

然而，其模拟在性能和实用性方面可能会有代价。例如，要从 Pug 模板文件中删除未使用的 CSS，你需要将 Pug 转换为 HTML 并在 jsdom 中模拟页面。在此步骤之后，UnCSS 可以对每个选择器运行 document.querySelector 并执行第 4 步。

目前，UnCSS 可能是最准确的删除未使用 CSS 的工具，适用于某些情况。如果你不使用服务器端渲染，并且有一个简单的 HTML 和 JavaScript 网站，它应该能正确工作，并且在 CSS 大小结果方面优于 PurgeCSS。

PurgeCSS 有一个用于 JavaScript 文件的提取器。目标是提供更准确的结果，这将使 CSS 大小结果优于 UnCSS。得益于 PurgeCSS 的模块化，开发者可以为特定框架（Vue、React、Aurelia）和文件类型（Pug、EJS）创建提取器。这样，你可以获得最准确的结果，而无需模拟。

PurifyCSS

PurifyCSS 最大的缺陷是缺乏模块化。然而，这也是其最大的优势。PurifyCSS 可以处理任何文件类型，不仅仅是 HTML 或 JavaScript。

PurifyCSS 的工作原理是查看文件中的所有单词，并将它们与 CSS 中的选择器进行比较。每个单词都被视为选择器，这意味着许多选择器可能被错误地认为已使用。例如，你可能在段落中恰好有一个与 CSS 中的选择器匹配的单词。

PurgeCSS 通过提供创建提取器的可能性来解决这个问题。提取器是一个接受文件内容并提取其中使用的 CSS 选择器列表的函数。它允许完美地删除未使用的 CSS。

提取器可以用作解析器，返回 AST（抽象语法树）并通过它查找任何 CSS 选择器。这是 purge-from-html 的工作方式。

你可以为每种文件类型指定要使用的提取器，从而获得最准确的结果。但使用特定提取器是可选的，你可以依赖默认提取器。