使用 Purgecss 删除WordPress主题中未使用的 CSS 来减小 CSS 文件体积

小本本的WordPress优化

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

在网站前端优化中，「删除未使用的CSS」是必不可少的一个步骤。但目前WordPress中还没有很方便的工具或插件来移除未使用的CSS，这就导致了很多朋友做WordPress性能优化的时候直接省略了这一步。

使用Purgecss移除WordPress主题中未使用的CSS

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

如果您的电脑上已经安装了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文件夹，然后把您的网站前端文件放进去。然后运行gulppurgecss命令。

命令执行完成后，您会在同级目录中看到一个build文件夹，build文件夹的内容就是经过Purgecss工具处理后，移除了未使用的CSS样式的样式表文件。

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

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

有些类是由JS生成的，下载的静态页面中可能不包含这些CSS类，为了避免被删除，我们需要将这些类添加到Purgecss白名单中。您可以根据需要添加whitelist和whitelistPatterns。

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

和TailwindCSS框架配合使用

默认情况下，Purgecss无法处理TailwindCSS特殊的CSS类名，我们可以为上面的配置文件添加一个自定义extractors来处理。

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

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

如果您已经使用了Gulp、Webpack、Postcss等工具来编译您的WordPress样式文件，同样可以将Purgecss工具整合到这些工具中，来帮助您在每次升级主题时自动移除未使用的CSS文件。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。