减肥大作战：让你的 CSS 也瘦身 —— PurgeCSS/UnCSS 扫盲指南
各位前端小伙伴们，有没有那么一刻，你看着自己项目里那庞大的 CSS 文件，内心充满了愧疚和无奈？就像看着自己肚子上的赘肉，明明知道它不应该在那里，却又无从下手，只能安慰自己“没事，穿宽松点看不出来”。
但是，网页的加载速度可不会因为你穿宽松的“CSS外套”就变快。冗余的 CSS 代码不仅拖慢了页面加载速度，还增加了浏览器的渲染负担，直接影响用户体验。想象一下，用户兴致勃勃地想打开你的网站，结果等了半天页面才慢吞吞地出来，就像你点了一份外卖，结果骑手迷路了半小时才送到，心情能好吗？
所以，今天我们就来聊聊如何给你的 CSS 做一次彻底的“减肥”，让它变得轻盈、高效，从而提升你的网站性能。我们要介绍的两位“减肥教练”就是：PurgeCSS 和 UnCSS。
为什么你的 CSS 会“发福”？
在深入了解 PurgeCSS 和 UnCSS 之前，我们先来分析一下，为什么我们的 CSS 会变得如此臃肿。
- 框架的“副作用”： 如今，我们开发网页很少会从零开始，往往会依赖一些 CSS 框架，比如 Bootstrap、Tailwind CSS、Materialize 等等。这些框架提供了大量的预设样式，方便我们快速构建页面。但是，为了满足各种各样的需求，它们往往包含了大量的 CSS 规则，而我们实际用到的可能只是其中的一小部分。这就好比你买了一台功能齐全的料理机，结果你只会用它来榨橙汁，其他的各种刀头和配件都闲置在那里，占地方又浪费。
- 迭代的“历史遗留问题”： 随着项目的迭代，样式会不断地被修改和更新。有些样式可能已经不再使用，但却依然存在于 CSS 文件中。就像你衣柜里那些已经过时的衣服，明明已经很久没穿了，但还是舍不得扔，占据了宝贵的空间。
- 复制粘贴的“坏习惯”： 在开发过程中，我们经常会从网上复制一些现成的 CSS 代码，或者直接从其他项目里“借鉴”样式。这些代码可能并不完全符合我们的需求，或者包含了多余的样式规则。这就好比你从别人家拿了一份菜谱，结果里面的很多食材你都没有，只能硬着头皮照着做，结果做出来的菜味道怪怪的。
- CSS 全局污染： CSS 容易造成全局污染，尤其是在大型项目中，很难追踪某个样式是否真的被使用。你可能觉得某个样式很重要，不敢轻易删除，结果它可能早就被废弃了。这就好比你仓库里堆满了各种各样的零件，你也不知道哪些是还能用的，哪些是已经报废的，只能堆在那里，占地方。
PurgeCSS：精准打击，定向清除
PurgeCSS 的理念是“按需清除”，它会分析你的 HTML、JavaScript 和其他模板文件，找出页面中实际使用的 CSS 选择器，然后将 CSS 文件中未使用的选择器及其对应的样式规则全部移除。
PurgeCSS 的工作原理就像一个经验丰富的侦探，它会仔细搜查你的代码，找出所有“嫌疑人”，然后逐一核实，确认它们是否真的参与了“犯罪”（被使用）。如果确认“嫌疑人”是清白的（未被使用），它就会毫不留情地将它们“绳之以法”（移除）。
如何使用 PurgeCSS？
PurgeCSS 可以通过多种方式集成到你的项目中，比如：
- 命令行工具： 你可以通过命令行直接运行 PurgeCSS，指定需要处理的 CSS 文件和需要扫描的文件（HTML、JavaScript 等）。
- 构建工具插件： PurgeCSS 提供了各种构建工具的插件，比如 Webpack、Gulp、Grunt 等。你可以将 PurgeCSS 集成到你的构建流程中，在每次构建时自动清除未使用的 CSS。
- PostCSS 插件： PurgeCSS 也可以作为 PostCSS 的插件使用，与其他的 PostCSS 插件一起，对 CSS 进行处理。
举个栗子：
假设你有一个 HTML 文件和一个 CSS 文件：
index.html:
<!DOCTYPE html>
<html>
<head>
<title>PurgeCSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">Hello, PurgeCSS!</h1>
<p class="content">This is a simple example.</p>
</body>
</html>style.css:
body {
background-color: #f0f0f0;
font-family: sans-serif;
}
.title {
font-size: 2em;
color: blue;
}
.content {
font-size: 1.2em;
color: gray;
}
.unused-class {
display: none;
}可以看到，style.css 中包含了一个名为 .unused-class 的样式规则，但在 index.html 中并没有使用到。
如果你使用 PurgeCSS 对 style.css 进行处理，PurgeCSS 会分析 index.html，发现只有 body、.title 和 .content 这三个选择器被使用到，因此会将 .unused-class 及其对应的样式规则移除。
UnCSS：亡羊补牢，从结果入手
UnCSS 的理念是“从结果入手”，它会先加载你的网页，然后在浏览器环境中运行 JavaScript 代码，分析页面中实际使用的 CSS 选择器，然后将 CSS 文件中未使用的选择器及其对应的样式规则全部移除。
UnCSS 的工作原理就像一个经验丰富的“拆迁队”，它会先对你的房子（网页）进行一次全面的“勘察”，找出所有“违章建筑”（未使用的 CSS 规则），然后毫不留情地将它们拆除，让你的房子变得更加整洁美观。
如何使用 UnCSS？
UnCSS 也可以通过多种方式集成到你的项目中，比如：
- 命令行工具： 你可以通过命令行直接运行 UnCSS，指定需要处理的 CSS 文件和需要扫描的 HTML 文件。
- Gulp 插件： UnCSS 提供了 Gulp 插件，你可以将 UnCSS 集成到你的 Gulp 构建流程中，在每次构建时自动清除未使用的 CSS。
举个栗子：
假设你有一个 HTML 文件和一个 CSS 文件，内容与上面的例子相同。
如果你使用 UnCSS 对 style.css 进行处理，UnCSS 会先加载 index.html，然后在浏览器环境中运行 JavaScript 代码，分析页面中实际使用的 CSS 选择器，发现只有 body、.title 和 .content 这三个选择器被使用到，因此会将 .unused-class 及其对应的样式规则移除。
PurgeCSS vs UnCSS：各有千秋，各有所长
PurgeCSS 和 UnCSS 都是优秀的 CSS 瘦身工具，但它们的工作原理和适用场景有所不同。
- PurgeCSS： 更加精准，性能更好，但需要配置正确的文件扫描路径，否则可能会误删 CSS 规则。适用于需要精确控制 CSS 规则的项目，以及大型项目。
- UnCSS： 使用更加简单，不需要配置复杂的扫描路径，但性能相对较差，因为它需要在浏览器环境中运行 JavaScript 代码。适用于小型项目，以及对性能要求不高的项目。
总结一下，我们可以用一个比喻来区分它们：
- PurgeCSS 就像一个外科医生， 手术精准，但需要提前做好详细的检查和诊断，否则可能会误伤“健康组织”。
- UnCSS 就像一个清洁工， 打扫起来比较简单，但效率相对较低，而且可能会留下一些“死角”。
使用 PurgeCSS/UnCSS 的注意事项：
- 动态添加的 CSS 类名： 如果你的页面中使用了 JavaScript 动态添加 CSS 类名，PurgeCSS 和 UnCSS 可能无法识别这些类名，从而导致相关的样式规则被误删。你需要使用一些特殊的方法来告诉 PurgeCSS 和 UnCSS 这些类名是需要保留的。
- CSS in JS： 如果你使用了 CSS in JS 技术（比如 styled-components、emotion 等），PurgeCSS 和 UnCSS 可能无法正常工作。你需要使用专门的工具来处理 CSS in JS 中的冗余样式。
- 白名单： 你可以配置白名单，指定哪些 CSS 选择器是需要保留的，即使它们没有被使用到。这可以防止一些重要的样式规则被误删。
- 测试： 在使用 PurgeCSS 和 UnCSS 之后，一定要进行充分的测试，确保所有的样式都正常显示。
最后，送你一句“减肥”箴言：
“减肥不是一蹴而就的事情，需要持之以恒的努力。给 CSS 瘦身也是一样，需要定期清理冗余代码，才能保持你的网站轻盈高效。”
希望这篇文章能帮助你理解 PurgeCSS 和 UnCSS 的原理和使用方法，让你也能轻松地给你的 CSS 做一次彻底的“减肥”，提升你的网站性能，改善用户体验。记住，一个苗条的网站，才是最健康的网站！