记录生活
简单不先于复杂

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

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

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

本文将为大家介绍怎么使用 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-auto

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

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

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

赞(0)
未经允许不得转载:爱安普 » 使用 Purgecss 删除WordPress主题中未使用的 CSS 来减小 CSS 文件体积