记一次 WordPress CSS 优化实操

精简、去重、压缩三件套

这份主题已经很多年，缝缝补补一直只是在改，并未做优化，最近在处理一些库的更新时遇到了冲突，繁重的 CSS 很难进行下去，于是才有了这份记录。

这部分内容别问 GPT ，其内容相当的过时且鸡肋，简单说就是他的答案全错，只能给个方向。

删除：PurgeCSS 移除无用的 CSS

这里用到的是一个叫 PurgeCSS 的工具，需配置 NodeJS 环境，LTS 版本随便整个就行。其官网有个 purgecss-with-wordpress，但实际上一点都用不上，因为没人用，所以即便有也不知怎么用，尝试无果。

安装：

npm i -g purgecss

使用：

purgecss --css ./**/*.css --content './**/*.php' './**/*.js' --output ./purged-css/

随之结果就会出现在 purged-css 文件夹。

对于 WordPress 需要注意：响应式的代码需要自行恢复，比如我这里是 ulkit 相关的 @media 代码，同时对于 wp_ 前缀也需要补回。

当然可以选择使用 –safelist 参数，但我这里最终还是需要使用 compare 来确认是否有误删，毕竟响应式用不着的也需要精简，于是选择了最精简再查看网站 UI 进行调试补回。

这个东西对于级联的 CSS 不会出错，我觉得很神奇，毕竟是穿插在 PHP、JS 中，没用的 class 删得很干净，最后 1w7k 行的 CSS 剩 5K，结果满意。

文档：https://purgecss.com/CLI.html

去重：PostCSS 移除重复的 CSS

我也不知道为什么以前这个主题的作者丢了一堆垃圾，可能是好几个版本的大杂烩，存在重复，经过精简后，肉眼可见重复代码。这里我只需要去重并保留格式，所以选择的是 PostCSS，同需要 NodeJS 环境。

安装：

npm install postcss postcss-cli postcss-discard-duplicates --save-dev

在需要使用的目录新建配置文件 postcss.config.js：

module.exports = {
    plugins: [
      require('postcss-discard-duplicates')
    ]
  };

终端 cd 到需要使用的目录：

npx postcss theme.css -o out.css

最后结果也是满意的，并不会乱删。

文档：https://github.com/postcss/postcss#usage

压缩：使用 Csso-CLI 进行 CSS 压缩

我没有这个需求，是先尝试了这个发现不满足我的需求于是才去找的 PostCSS，同需要 NodeJS 环境。

安装：

npm install -g csso-cli

使用：

csso theme.css --output out.css

这个就简单直接，CSS 打开就是一团乱麻，5k 行最后干得只剩 1 行，没错，编辑器是这么显示的。

高级玩法则看文档：https://github.com/css/csso

其他

对于 NodeJS 安装的包，想卸载只需要把 install 改为 uninstall 即可。可以使用 npm list -g --depth=0 看看自己都装了啥。

以上。