PurgeCSS

比较

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 的工作方式。

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