开发wordpress主题的时候，为了保证效果，同时加快开发速度，我们经常会使用一些 css 框架。主题开发完成后，这些 css 框架中其实有很大一部分 css 样式是没有在主题中使用的。
「删除未使用的 css」是网站前端优化中必不可少的一个步骤。如果不使用工具，我们是无法手工完成这个步骤的，太费时间不说，还容易遗漏。而目前 wordpress 还没有很方便的移除未使用的css 的工具或插件，这就导致了很多朋友做 wordpress性能优化的时候直接省略了这一步。
本文将为大家介绍怎么使用 工具来移除wordpress主题中未使用的 css 样式，以达到优化 wordpress 前端性能的目的。本文所介绍的方法是通过 gulp 来使用 purgecss 的，继续阅读之前，需要您对 有一定的了解或使用经验。
使用 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-auto。
extractors : [
{
extractor : content => content.match(/[a-z0-9-:\/] /g) || [],
extensions: ['css', 'html'],
},
],purgecss 无法处理 php 文件生成的动态网站，使用 purgecss 处理之前，我们需要把整个网站下载成静态的 html，然后再交给 purgecss 处理。下载 html 页面的工作我们可以使用 或 来完成。
如果你已经使用了 gulp、webpack、postcss 等工具来编译您的 wordpress 样式文件，同样可以把 purgecss 工具整合到这些工具中，来帮助您在每次升级主题时自动移除未使用的 css 文件，具体方法在这里就不多说了，需要的朋友可以参考 purge css 官方文档。
