剔除冗余CSS代码的业界方案对比

文章大纲 1. 前言 2. 介绍PurgeCSS核心原理 3. 检测工具 4. 方案对比 UnCSS PurifyCSS 5. PurgeCSS的原理 6. 局限性 7. 总结

前言 随着业务的不断发展和迭代，我们的网页中逐渐积累了越来越多冗余的CSS代码。这些多余的样式不仅占用了CDN的带宽，而且还可能导致页面加载速度变慢，影响用户体验。虽然对于JavaScript代码，我们可以通过Tree-Shaking等技术进行优化，剔除不必要的部分，但对于CSS代码，我们能否采用类似的“摇树优化”方法呢？答案是肯定的。本文将探讨当前主流的CSS冗余代码优化方案，特别是PurgeCSS的工作原理。

方案对比

UnCSS UnCSS的工作流程相对简单明了：

1. 使用JSDOM加载HTML文件并执行相关的JavaScript代码。2. 通过PostCSS解析所有样式表，并使用`document.querySelector`筛选出HTML文件中未被使用的选择器。3. 将剩余的样式规则转换回CSS代码。

UnCSS利用JSDOM模拟HTML和JavaScript的执行环境，从而能够准确删除未使用的CSS选择器。然而，它的局限性在于需要将模板文件事先转化为HTML，并且在处理服务器端渲染（SSR）页面时，它也显得无能为力。此外，近年来该库并未得到更新与维护。

PurifyCSS PurifyCSS是一种相对较老的CSS精简方案，它采用的是基于静态代码检测的方式。其基本原理是扫描文件中的所有单词，并将它们与CSS中的选择器进行比对。这种方法的缺点在于，每个单词都被视作选择器，这可能导致误判，影响准确性。尽管如此，PurifyCSS的优势在于它支持多种模板文件格式，而不仅仅局限于HTML。

PurgeCSS的原理 接下来，我们将重点介绍当前比较流行的PurgeCSS。对于使用TailwindCSS的开发者来说，可能会对`tailwind.config.js`中的purge选项有所了解，该选项实际上是基于PurgeCSS实现的。

PurgeCSS同样是基于静态代码检测的方案。它通过分析HTML（还支持ReactJSX、Vue、Jade等其他模板）和CSS文件，首先匹配CSS文件中使用的选择器与内容文件中的选择器，然后从CSS中剔除未被引用的选择器，从而生成更为精简的CSS文件。以下是一个简单的例子：

javascriptawait new PurgeCSS().purge({  content: [    {      raw: '
',      extension: 'html'    },    '/*.js',    '/*.html',    '**/*.vue'  ],  css: [    {      raw: 'body { margin: 0; }'    },    'css/app.css'  ]});

在调用PurgeCSS时，我们需要提供DOM节点所在的文件及CSS文件的路径。PurgeCSS的主要工作包括两个方面：

1. 提取模板文件中可能的样式选择器。2. 分析CSS规则，剔除未被引用的规则。

对于使用React开发的项目，PurgeCSS提供了自定义提取器的支持，以便获取更为准确的结果。

局限性 尽管PurgeCSS在剔除冗余CSS方面表现出色，但它也存在一些局限性。

场景一：动态生成DOM或className 由于PurgeCSS是基于静态检测的，它无法识别在运行时动态生成的DOM或className。例如：

javascriptconst wrapClassName = calClassName();return (  
);

在这种情况下，PurgeCSS无法检测到动态生成的类名。为了避免误删除，可以利用PurgeCSS的白名单机制，将动态类名添加到白名单中。

场景二：其他页面或外部组件依赖当前页面的样式 在某些情况下，PurgeCSS可能会误判，导致不必要的样式被删除。为此，开发者在编写代码时应避免将公共样式放在业务目录下。

检测工具 PurgeCSS提供了对应的Webpack插件（purgecss-webpack-plugin），可以在编译时自动剔除冗余代码。鉴于PurgeCSS的一些局限性，直接在生产环境中使用存在一定风险。因此，我们可以借助PurgeCSS开发一个检测工具，以帮助开发者在开发阶段进行冗余代码检测。该工具的主要功能包括：

1. 提取页面的样式选择器。2. 提取页面引入的CSS文件路径。3. 对检测结果进行分析，计算冗余代码的体积。

总结 本文介绍了处理CSS冗余代码的几种主流方案，并重点探讨了PurgeCSS的原理与局限性。结合PurgeCSS，我们可以实现一个检测工具，辅助开发者优化代码，提升项目的性能。希望本文能对您在CSS优化过程中的实际工作有所帮助。