跳到主要内容

与同类工具对比

PurgeCSS 不是唯一一个用于删除未使用的 CSS 代码的工具。以下是 PurgeCSS 和其他两个最常用的并且具有相同功能的工具之间的比较。

UnCSS​

如其 README 文件所示，UnCSS 的工作方式如下：

  • 由 jsdom 加载 HTML 文件并执行 JavaScript 代码。
  • PostCSS 解析所有样式表。 通过 document.querySelector 筛选出 HTML 文件中未找到的选择器。
  • 将其余的样式规则转换回 CSS 代码。

由于其能够模拟 HTML 和 JavaScript 的执行，UnCSS 可以有效地从 web 应用程序中删除未使用的选择器。

但是，其模拟行为可能会在性能和实用性方面带来成本消耗。例如，要从 Pug 模板文件中删除未使用的 CSS，你需要将 Pug 转换为 HTML 并在 jsdom 中模拟页面。完成此步骤后，UnCSS 可以在每个选择器上运行 document.querySelector 并执行步骤 4。

目前，在删除未使用的 CSS 方面，UnCSS 在某些情况下可能是最准确的工具。如果你不使用服务器端渲染（server-side rendering），并且网站上只有简单的 HTML 和 javascript的话，则它应该可以正常工作，并且在 CSS 文件大小方面要优于 PurgeCSS。

PurgeCSS 针对 JavaScript 文件提供了一个提取器（extractor），目标是提供更准确的结果，这将在生成的 CSS 文件大小方面优于 UnCSS。由于 PurgeCSS 是模块化的，开发人员可以为特定框架（Vue、React、Aurelia）和文件类型（pug、ejs）创建提取器。这样，无需模拟（HTML 和 JavaScript 的执行）即可获得最准确的结果。

PurifyCSS​

PurifyCSS 的最大缺陷是缺乏模块化。但是，这也是它的最大的优势。PurifyCSS 可以支持任何文件类型，而不仅仅是 HTML 或 JavaScript。

PurifyCSS 的工作原理是查看文件中的所有单词，并将它们与 CSS 中的选择器进行比较。每个单词都被视为选择器，这意味着可能会错误地找到许多选择器。例如，有可能碰巧在一个段落中存在一个单词与 CSS 中的选择器相同。

PurgeCSS 通过支持自定义提取取器（extractor）来解决此问题。提取器是一个函数，它的作用是根据文件内容提取文件中使用所有的 CSS 选择器。它可以完美地删除未使用的 CSS。

提取器可用作解析器，该解析器返回 AST（抽象语法树）并在其中查找所有 CSS 选择器。这也是 purge-from-html 的工作方式。

你可以指定每种文件类型要使用的提取器，以获得最准确的结果。但是自定义提取器是可选的，你可以只使用默认的提取器。