开发WordPress主题的时候，为了保证效果，同时加快开发速度，我们经常会使用一些 CSS 框架。主题开发完成后，这些 CSS 框架中其实有很大一部分 CSS 样式是没有在主题中使用的。

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

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

使用 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 处理后，WordPress 智库的 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$/],
})

和Tailwind CSS框架配合使用

默认情况下，Purgecss无法处理Tailwind CSS特殊的CSS类名，我们可以为上面的配置文件添加一个自定义extractors来处理，配置代码如下，主要是为了使用TailwindCSS类中的:\字符，如 .xl\:overscroll-autoThe

extractors       : [
    {
        extractor : content => content.match(/[A-z0-9-:\/]+/g) || [],
        extensions: ['css', 'html'],
    },
],

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

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