翻译：使用PurgeCSS删除未使用的CSS

Maya本尊
5,624 阅读3分钟

前言

为了提高英文水平，尝试着翻译一些英文技术文章，首先就从这个Vue的小技巧文章开始，目前英文版一共22篇。计划用时2~3个月翻译完成。

目前进度[5/22]

原文链接

Remove unused CSS with PurgeCSS

译文

我们可以用不同的方式处理Web性能，其中之一就是删除我们在应用程序中不使用的所有JS和CSS。

就CSS而言，当我们使用Bootstrap、Bulma或Tailwind等框架，以及面对大型应用程序或遗留应用程序时，这一点甚至更为重要。

PurgeCSS是一种在应用程序中比较字符串来删除未使用的CSS的工具。这有一些优点，但是也有一些问题，所以请对后面的白名单部分保持关注。

例如，VueDese的网站是使用Tailwind在nuxt（静态生成）上构建的，它使用purgecss优化生成的CSS。

如果我禁用PurgeCSS，你会看到Tailwind css有485Kb。

如果我激活PurgeCSS，它会降到16kb:

每个项目中PurgeCSS配置会有所不同。它可以设置为Webpack插件或Postcss插件。

在VueDese这个案例中，我使用Postcss插件。所以，我有一个postcss.config.js文件，内容如下：

const purgecss = require("@fullhuman/postcss-purgecss");

const plugins = [...];

if (process.env.NODE_ENV === "production") {
  plugins.push(
    purgecss({
      content: [
        "./layouts/**/*.vue",
        "./components/**/*.vue",
        "./pages/**/*.vue"
      ],
      whitelist: ["html", "body"],
      whitelistPatternsChildren: [/^token/, /^pre/, /^code/],
    })
  );
}

module.exports = { plugins };

基本上，你只需要设置在哪里（文件夹路径）使用Content属性查找匹配的类。

另外，你可能要设置白名单来标记一些类，免得被误删除。你至少需要在html和body以及任何动态类中这样做。

在我的案例中，我会使用prismjs高亮代码块，并且添加了几个token类，以及pre和code标签中的样式。为了排除它们（不使用PurgeCSS删除），我需要使用whitelistPatternsChildren属性。

此外，Tailwind还需要一个自定义提取器（这里参考得是Tailwind文档上得方法），以便与purgecss一起正常工作。总之，VueDese的整个postss.config.js文件包含以下内容：

const join = require("path").join;
const tailwindJS = join(__dirname, "tailwind.js");
const purgecss = require("@fullhuman/postcss-purgecss");

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

const plugins = [require("tailwindcss")(tailwindJS), require("autoprefixer")];

if (process.env.NODE_ENV === "production") {
  plugins.push(
    purgecss({
      content: [
        "./layouts/**/*.vue",
        "./components/**/*.vue",
        "./pages/**/*.vue"
      ],
      whitelist: ["html", "body"],
      whitelistPatternsChildren: [/^token/, /^pre/, /^code/],
      extractors: [
        {
          extractor: TailwindExtractor,
          extensions: ["html", "vue"]
        }
      ]
    })
  );
}

module.exports = {
  plugins
};

今天就到此为止！

你可以在线阅读文章tip online（可以 复制/粘贴 代码），但是请你记住，如果你喜欢，要和所有同事分享VueDose。

下周见。

我的理解

当你的项目足够大的或者足够复杂或者有很大的遗留包袱的时候，你可以通过一些手段，去删除代码中无用的js和css，这样做会大大减少你的项目体积！这篇文章介绍了使用Postcss插件采用PurgeCSS的方式去删除css，并且使用应用了Tailwind框架案例做出了代码说明。

关于更多的PurgeCSS请前往github。

关于去除无用css还有一个好用的库UnCSS，想要了解详情请前往github

结尾

水平有限，难免有错漏之处，望各位大大轻喷的同时能够指出，跪谢！

其它翻译

1、翻译：提高vue.js中大型数据的性能
2、翻译：测量vue应用运行时的性能！
3、使用PurgeCSS删除未使用的CSS
4、翻译：Vue.js 2.6.0 中的新指令v-slot
5、翻译：使用v-bind和v-on的自适应组件

avatar
文章
阅读
粉丝