WordPress开发过程中如何删除WordPress主题中未使用的CSS来减小CSS文件大小？

开发人员在WordPress开发主题的时候，为了加快开发速度，会使用到一些CSS框架，但是，开发完成后，会发现CSS框架中有很大一部分的CSS样式是没有使用到的，删除未使用的 CSS是网站前端优化中必不可少的一个步骤。如果不使用工具，我们是无法手工完成这个步骤的，太费时间不说，还容易遗漏。而目前 WordPress 还没有很方便的移除未使用的CSS 的工具或插件，这就导致了很多朋友做 WordPress性能优化的时候直接省略了这一步。那么WordPress开发过程中如何删除WordPress主题中未使用的CSS来减小CSS文件大小？

使用 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$/],

})

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