CSS `PurgeCSS` / `Unused CSS`：移除未使用的 CSS 代码，优化打包体积

各位前端的英雄们，大家好！我是今天的主讲人，咱们今天聊点实在的，关于CSS的瘦身秘籍——PurgeCSS和Unused CSS。谁也不想自己的网站像个虚胖的家伙，加载速度慢吞吞的，对吧？所以，让我们一起把那些没用的CSS代码踢出去！

开场白：CSS的烦恼

话说，咱们写CSS的时候，一开始总是信心满满，觉得每个样式都会派上用场。但是，随着项目越来越大，代码越堆越多，总有一些CSS就像衣柜里压箱底的衣服，永远也穿不上。这些“僵尸代码”白白占据着宝贵的带宽，拖慢了网站速度，简直是前端工程师的噩梦。

那么，如何才能把这些“僵尸代码”揪出来，然后毫不留情地干掉呢？这就是PurgeCSS和Unused CSS要解决的问题。

第一章：PurgeCSS——CSS的瘦身大师

PurgeCSS，顾名思义，就是“清除CSS”的意思。它就像一个专业的健身教练，帮你把CSS中那些多余的脂肪（unused CSS）狠狠地甩掉，让你的网站变得更加苗条健壮。

1.1 PurgeCSS的工作原理

PurgeCSS的工作原理其实很简单：

扫描你的HTML、JavaScript等文件： PurgeCSS会像侦探一样，扫描你的项目中所有可能用到CSS选择器的地方，比如HTML模板、JavaScript代码、Vue组件等等。
提取用到的CSS选择器：它会把所有在这些文件中出现的CSS选择器提取出来，建立一个“已使用CSS选择器”的清单。
对比CSS文件：然后，PurgeCSS会拿这份清单，和你所有的CSS文件进行对比，看看哪些CSS选择器在你的清单里，哪些不在。
移除未使用的CSS：最后，PurgeCSS会把CSS文件中那些不在清单里的CSS规则统统删除，只留下真正被用到的部分。

1.2 如何使用PurgeCSS

PurgeCSS的使用方式有很多种，可以作为PostCSS插件、Webpack插件、Gulp插件等等。这里我们以PostCSS插件为例，讲解一下如何使用PurgeCSS。

步骤一：安装PurgeCSS

首先，你需要安装PurgeCSS和PostCSS。打开你的终端，输入以下命令：

npm install -D postcss @fullhuman/postcss-purgecss

步骤二：配置PostCSS

接下来，你需要在你的postcss.config.js文件中配置PurgeCSS。如果你的项目还没有这个文件，就创建一个。

// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'), // 如果你使用了Tailwind CSS
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.jsx',
        './src/**/*.js',
        // 扫描你的HTML、Vue、JSX、JS文件
      ],
      defaultExtractor: (content) => content.match(/[w-/:]+(?<!:)/g) || [],
      safelist: [
        // 这里可以添加不需要被PurgeCSS处理的CSS选择器
        'body',
        'html',
        /^hljs-/, // 如果你使用了highlight.js，需要添加这个
      ],
    }),
  ],
};

配置项详解：

content: 指定PurgeCSS需要扫描的文件路径。这里我们指定了./src目录下所有的HTML、Vue、JSX和JS文件。
defaultExtractor: 指定PurgeCSS如何从文件中提取CSS选择器。默认情况下，PurgeCSS使用一个简单的正则表达式来提取选择器。
safelist: 指定不需要被PurgeCSS处理的CSS选择器。有时候，一些CSS选择器可能是在JavaScript中动态生成的，PurgeCSS无法检测到，这时候就需要把这些选择器添加到safelist中，避免被误删。例如，如果你使用了highlight.js代码高亮库，就需要将以hljs-开头的选择器添加到safelist中，否则代码高亮样式可能会失效。

步骤三：运行PostCSS

配置完成后，你就可以运行PostCSS来处理你的CSS文件了。具体的运行方式取决于你的构建工具。例如，如果你使用了Webpack，可以在webpack.config.js文件中配置PostCSS Loader。

1.3 PurgeCSS的注意事项

动态生成的CSS选择器： PurgeCSS无法检测到JavaScript中动态生成的CSS选择器，你需要手动将这些选择器添加到safelist中。
CSS Modules：如果你使用了CSS Modules，PurgeCSS可以很好地处理，不需要额外的配置。
Tailwind CSS：如果你使用了Tailwind CSS，PurgeCSS可以很好地配合使用，可以显著减小最终的CSS文件大小。
谨慎使用： PurgeCSS虽然强大，但是也可能会误删一些CSS规则。因此，在使用PurgeCSS之前，一定要仔细检查你的配置，确保不会影响网站的正常显示。建议先在测试环境中运行PurgeCSS，确认没有问题后再应用到生产环境。

1.4 PurgeCSS的进阶用法

自定义提取器：如果你觉得默认的提取器不够用，可以自定义提取器。提取器是一个函数，接收文件内容作为参数，返回一个CSS选择器数组。
使用rejected选项： PurgeCSS提供了一个rejected选项，可以让你查看哪些CSS规则被删除了。这对于调试PurgeCSS的配置非常有帮助。

第二章：Unused CSS——Chrome DevTools的秘密武器

除了PurgeCSS之外，Chrome DevTools也提供了一个强大的工具，可以帮助你找到未使用的CSS代码，那就是“Coverage”功能。

2.1 Coverage功能的使用方法

打开Chrome DevTools：在你的Chrome浏览器中，按下F12键，或者右键点击页面，选择“检查”打开Chrome DevTools。
打开Coverage面板：在Chrome DevTools中，按下Ctrl+Shift+P（Windows）或Cmd+Shift+P（Mac）打开命令菜单，输入“Coverage”，然后选择“Show Coverage”。
开始录制：点击Coverage面板左上角的“Reload”按钮，开始录制代码覆盖率。
浏览网页：正常浏览你的网页，让网页加载所有的CSS和JavaScript代码。
查看结果：录制完成后，Coverage面板会显示一个表格，列出所有的CSS和JavaScript文件，以及每个文件的代码覆盖率。

2.2 Coverage结果解读

在Coverage面板中，你可以看到每个文件的代码覆盖率，以百分比的形式显示。绿色表示已使用的代码，红色表示未使用的代码。

点击文件名，可以查看文件的详细代码覆盖情况。未使用的代码会用红色高亮显示。

2.3 如何利用Coverage结果优化CSS

通过Coverage面板，你可以清楚地看到哪些CSS代码没有被使用。然后，你可以手动删除这些代码，或者使用PurgeCSS等工具自动删除。

2.4 Coverage功能的局限性

只能检测当前页面的未使用CSS： Coverage功能只能检测当前页面的未使用CSS，无法检测整个网站的未使用CSS。
需要手动浏览网页： Coverage功能需要你手动浏览网页，才能检测到所有可能用到的CSS代码。如果你的网站有很多页面，或者有很多交互行为，可能需要花费大量的时间才能完成检测。
动态生成的CSS选择器： Coverage功能也无法检测到JavaScript中动态生成的CSS选择器。

第三章：PurgeCSS vs Unused CSS：谁更胜一筹？

PurgeCSS和Unused CSS都是非常有用的工具，可以帮助你优化CSS代码。但是，它们的应用场景和优缺点有所不同。

特性	PurgeCSS	Unused CSS (Chrome DevTools Coverage)
工作方式	静态分析：扫描HTML、JavaScript等文件，提取CSS选择器，然后对比CSS文件，删除未使用的CSS规则。	动态分析：通过Chrome DevTools录制代码覆盖率，检测当前页面未使用的CSS代码。
适用范围	适用于整个项目，可以一次性删除所有未使用的CSS代码。	适用于单个页面，可以快速检测当前页面未使用的CSS代码。
精确度	可能会误删动态生成的CSS选择器，需要手动添加到`safelist`中。	只能检测当前页面的未使用CSS，无法检测整个网站的未使用CSS。
自动化程度	自动化程度高，可以集成到构建流程中。	需要手动浏览网页，自动化程度较低。
学习成本	学习成本较高，需要了解PurgeCSS的配置和使用方法。	学习成本较低，只需要了解Chrome DevTools的Coverage功能即可。
适用场景	适用于大型项目，可以显著减小CSS文件大小，提高网站加载速度。	适用于快速检测单个页面未使用的CSS代码，方便手动删除。
与其他工具配合	可以与PostCSS、Webpack、Gulp等构建工具配合使用。	可以与PurgeCSS等工具配合使用，先使用Coverage功能检测未使用的CSS代码，然后使用PurgeCSS删除。

结论：

如果你的项目比较大，需要一次性删除所有未使用的CSS代码，建议使用PurgeCSS。
如果你的项目比较小，或者只需要检测单个页面未使用的CSS代码，可以使用Chrome DevTools的Coverage功能。
你可以将两者结合使用，先使用Coverage功能检测未使用的CSS代码，然后使用PurgeCSS删除。

第四章：最佳实践：CSS瘦身的综合方案

说了这么多，我们来总结一下CSS瘦身的最佳实践方案：

规范你的CSS代码：保持良好的CSS编码习惯，避免冗余和重复的代码。
使用CSS预处理器：使用Sass、Less等CSS预处理器，可以提高CSS代码的可维护性和可重用性。
使用CSS Modules：使用CSS Modules，可以避免CSS选择器冲突，提高CSS代码的模块化程度。
使用Tailwind CSS等原子化CSS框架：原子化CSS框架可以显著减小CSS文件大小，提高网站加载速度。但是，需要注意原子化CSS框架可能会增加HTML文件的大小。
使用PurgeCSS删除未使用的CSS代码：配置PurgeCSS，删除未使用的CSS代码，减小CSS文件大小。
使用Chrome DevTools的Coverage功能检测未使用的CSS代码：定期使用Coverage功能检测未使用的CSS代码，及时删除。
压缩你的CSS文件：使用CSS压缩工具，压缩你的CSS文件，减小文件大小。
使用CDN加速你的CSS文件：使用CDN加速你的CSS文件，提高网站加载速度。
监控你的网站性能：使用Google PageSpeed Insights等工具监控你的网站性能，及时发现和解决问题。

结束语：让你的网站更苗条！

CSS瘦身是一个持续的过程，需要我们不断地学习和实践。希望通过今天的讲解，大家能够掌握PurgeCSS和Unused CSS的使用方法，让你的网站变得更加苗条健壮，跑得更快！记住，代码就像身材，也要定期“健身”！咱们下期再见！

发表回复 取消回复

发表回复取消回复