使用 Purgecss 删除 WordPress 主题中未使用的 CSS 代码

开发 WordPress 主题的时候，为了保证效果，同时加快开发速度，我们经常会使用一些 CSS 框架。主题开发完成后，这些 CSS 框架中其实有很大一部分 CSS 样式是没有在主题中使用的。删除未使用的 CSS 是网站前端优化中必不可少的一个步骤。

如果不使用工具，我们是无法手工完成这个步骤的，太费时间不说，还容易遗漏。而目前 WordPress 还没有很方便的移除未使用的 CSS 的工具或插件，这就导致了很多朋友做 WordPress 性能优化的时候直接省略了这一步。

本文将为大家介绍怎么使用 Purgecss 工具来移除 WordPress 主题中未使用的 CSS 样式，以达到优化 WordPress 前端性能的目的。本文所介绍的方法是通过 Gulp 来使用 Purgecss 的，继续阅读之前，需要您对 Gulp 前端构建工具有一定的了解或使用经验。

什么是 PurgeCSS

PurgeCSS 是一个用来删除未使用的 CSS 代码的工具。可以将它作为你的开发流程中的一个环节。 当你构建一个网站时，你可能会决定使用一个 CSS 框架，例如 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等，但是，你所用到的也只是框架的一小部分而已，大量 CSS 样式并未被使用。

这就是 PurgeCSS 发挥作用的地方。PurgeCSS 通过分析你的内容和 css 文件，首先它将 css 文件中使用的选择器与内容文件中的选择器进行匹配，然后它会从 css 中删除未使用的选择器，从而生成更小的 CSS 文件。

使用 Purgecss 移除未使用的 CSS

如果您的电脑上已经安装的 nodejs，并且已经使用 npm init 命令创建了项目，使用下面的命令安装 Purgecss 为项目依赖。

npm i -D gulp-purgecss

安装后，我们需要创建一个 Gulp 命令配置文件 gulpfile.js，然后把以下内容加入到这个文件中。

const gulp = require('gulp')
const purgecss = require('gulp-purgecss')
gulp.task('purgecss', () => {
return gulp
.src('src/**/*.css')
.pipe(
purgecss({
content: ['src/**/*.html']
})
)
.pipe(gulp.dest('build/'))
})

创建完成后，我们需要在 gulpfile.js 的同级目录中新建一个 src 文件夹，然后把我们的网站前端文件放进去。然后运行命令。

gulp purgecss

命令执行完成后，我们会在同级目录中看到一个 build 文件夹，build 文件夹的内容就是经过 Purgecss 工具处理后，移除了未使用的 CSS 样式的样式表文件。 对比处理前后的 CSS 文件，我们会发现，处理后的文件体积会减小很多。

举例来说，使用 Purgecss 处理后，SEO 大学的 CSS 文件体积由 220K 减小到了 75 K，减小了原来体积的三分之二，如果您使用的 Avada 等高级主题，这个比例估计会更大。

为 JavaScript 生成的 CSS 类设置白名单

需要注意的是，有些类是 JS 生成的，下载的静态页面中没有包含这些 CSS 类，我们需要把这些类添加到 Purgecss 白名单中，以避免被删除。添加白名单的方法如下，whitelist 是具体的 CSS 类，whitelistPatterns 是正则表达式匹配的 CSS 类，我们可以根据需要添加。

const purgecss = new Purgecss({ content: [], // content whitelist: ['random', 'yep', 'button'] whitelistPatterns: [/red$/],
})

Purgecss 无法处理 PHP 文件生成的动态网站，使用 Purgecss 处理之前，我们需要把整个网站下载成静态的 HTML，然后再交给 Purgecss 处理。下载 HTML 页面的工作我们可以使用 Httptrack 或 SiteSucker 来完成。

如果你已经使用了 Gulp、Webpack、Postcss 等工具来编译您的 WordPress 样式文件，同样可以把 Purgecss 工具整合到这些工具中，来帮助您在每次升级主题时自动移除未使用的 CSS 文件，具体方法在这里就不多说了，需要的朋友可以参考 PurgeCSS 官方文档。