未用

我最近写了一篇名为 关于“未用 CSS”工具的真相 的文章，在这篇文章中我尝试列举任何工具在寻找真正“未用” CSS 时所面临的所有挑战。 主要思想是，CSS 选择器匹配 DOM 中的元素，而 DOM 中的这些元素来自各种来源：您的静态模板、基于服务器端状态的动态模板，当然还有 JavaScript，它可以以任何方式操作 DOM，包括从 API 和第三方拉取内容。

在所有这些因素的影响下，任何工具如何才能真正准确地展示未用 CSS，从而使实际删除这些 CSS 不会像保留它们一样危险？

所以，我说

然而，我不认为这些工具毫无用处——它们只是……工具。 它们的用途实际上可以成为改善代码的积极步骤。 它们的用途表明好的，我承认，我有点害怕我们的 CSS。 您可以使用此工具来大致了解未用 CSS 可能是什么，然后将此信息与您对 CSS 代码库的了解结合起来，做出更明智的决策。

我坚持这一点，并且值得指出一些成功的用例。

Sarah Dayan 刚刚写了一篇文章名为 如何使用 PurgeCSS 减少 250 KB 的无效 CSS 权重。 她在使用 Tailwind CSS，这是一个原子 CSS 库，许多人都成功使用过它。

在我的情况下，我不仅加载了整个 Tailwind CSS 库，而且还为某些模块添加了一些变体。 最终，这导致最终的压缩 CSS 文件大小为 259 KB（在 GZip 压缩之前）。

使用 GZip 压缩后它只有十分之一大小，但仍然很多 CSS。 Tailwind 建议使用 PurgeCSS，而这正是 Sarah 所做的事情。 PurgeCSS 不会处理我提到的任何事情，例如状态变化、JavaScript 等等，但它会查看您希望它查看的所有静态文件——包括内容和 CSS——并根据这些内容进行分析。 更好的是，Sarah 知道她有一些第三方内容正在运行，因此她专门处理了这种情况

PurgeCSS 无法检测到我需要保留诸如 .ais-Highlight 之类的选择器，因为使用它的组件仅在运行时显示在 DOM 中。

因此，她将其中一些 CSS 分开并更新了配置。 然后……

使用此新配置，我的最终 CSS 文件大小从 259 KB 变成了……9 KB！

我喜欢它。 使用这个工具，非常清楚地了解您网站上发生的事情，并最终做出选择，共同取得胜利。

Sarah 还提到了未用 CSS 的这个概念在精神上与未用 JavaScript 的概念相关。 在 JavaScript 中，它被称为树摇，而 正如 Jeremy Wagner 所说

树摇是一种死代码消除的形式。

我更加隐式地信任树摇的工具。 这些是用 JavaScript 编写的工具，用于查看 JavaScript 以发现未使用的 JavaScript。 当谈论树摇时，技术之间的交叉似乎并不那么广泛。 不过，也可能存在一些配置后的第三方内容，它们会在您的网站上调用公共函数，或者直接在 HTML 元素上调用事件处理程序。 如今，在我看来，这些东西似乎比较少见，但这只是我个人经验的偏差。