如何删除未使用的 CSS 代码？

<aside> 🔗 TOC

</aside>

随着前端项目的不断迭代，就可能出现部分 CSS 代码未使用的情况。这些未使用代码就可能影响应用性能。

那么，如何有效地删除未使用的 CSS 代码呢？本文将介绍一种强大的工具——https://github.com/FullHuman/purgecss，它可以自动检测和删除未使用的 CSS 代码。无论是在 Vue、React 还是其他前端框架中，PurgeCSS 都能轻松集成。

接下来，让我们一起探索如何配置和使用 PurgeCSS，以及一些高级配置选项，帮助我们根据项目需求定制删除未使用的 CSS 代码的过程！

未使用的 CSS

使用 Chrome 浏览器的 Coverage 面板，就可以看到当前页面所有CSS 文件的使用情况（打开Coverage面板方式：Ctrl+Shift+P，搜索 Coverage）：

这里显示了每个文件的总大小、未使用的CSS 的大小、未使用的 CSS 所占比例。可以看到，文件中未使用的 CSS 占大多数。

点开一个文件，就可以看到这个文件中有哪些样式使用了（蓝色），有哪些样式未使用（红色）：

默认情况下，浏览器必须下载、解析和处理它遇到的所有外部样式表，然后才能将内容渲染到用户屏幕。每个外部样式表都必须从网络下载。这些额外的网络任务会显着增加用户在屏幕上看到任何内容之前必须等待的时间。

未使用的 CSS 还会减慢浏览器构建渲染树的速度。渲染树类似于 DOM 树，不同之处在于它还包含每个节点的样式。要构建渲染树，浏览器必须遍历整个 DOM 树，并检查哪些 CSS 规则适用于每个节点。未使用的 CSS 越多，浏览器可能需要花费更多的时间来计算每个节点的样式。

PurgeCSS 是什么？

PurgeCSS 是一个用于删除未使用的 CSS 的工具。它对于优化应用通常很有用。当使用 Bulma、Bootstrap 或 Tailwind 等 CSS 框架时，就会有很多未使用的 CSS。这就是 PurgeCSS 的用武之地。它会分析内容和 CSS 文件，以确定哪些样式未使用，并将其删除。PurgeCSS 可以与最常见的 JavaScript 库/框架配合使用，例如 Vue.js、React、Gatsby 等。

虽然 PurgeCSS 并不是删除未使用的 CSS 的唯一工具，但它因其模块化、易用性和广泛的自定义选项而脱颖而出。模块化使开发人员能够为特定用例和框架创建模块提取器。提取器是读取文件内容并提取所使用的 CSS 选择器列表的函数。

PurgeCSS 提供了一个非常可靠的默认提取器，可以处理多种文件类型。但是，默认情况下，PurgeCSS 会忽略包含 @、:和 / 等特殊字符的未使用 CSS 代码。因此，PurgeCSS 可能无法完全适配你正在使用的文件类型或 CSS 框架。

此外，PurgeCSS 还有很多配置项，可以根据需求自定义其行为。例如，PurgeCSS 包括针对 fontFace、keyframes、extractors、CSS 等选项。定制化可以改善 PurgeCSS 的性能和效率。PurgeCSS 很容易上手，并提供了详细的文档。截至撰写本文时，PurgeCSS 在 npm 上每周下载量超过 90 万次，GitHub 上获得了 7.4k+ Star。

PurgeCSS 是如何工作的？

PurgeCSS 适合在生产环境使用，可以分析内容和 CSS 并删除未使用的样式。在开发过程中运行 PurgeCSS 是没必要的，因为在开发过程中，可能会经常创建未使用的样式，这意味着每次都必须运行 PurgeCSS。