跳到主要内容

与同类工具对比

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

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