【译】Vue 的小奇技（第三篇）：用 PurgeCSS 移除不须要的 CSS

• 原文地址：Measure runtime performance in Vue apps
• 原文做者：Alex Jover
• 译者：程序猿何大叔

特别声明：本文是做者 Alex Jover 发布在 VueDose 上的一个系列。

版权归做者全部。

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。

为了避免影响你们阅读，得到受权的记录会放在本文的最后。

咱们有不少能够提升 web 性能的方法，而其中一种就是把所不须要的 JS 和 CSS，从咱们的应用中所有移除掉。

当咱们须要面对大型应用或者老旧项目，且其中使用了相似 Bootstrap、Bulma 或 Tailwind 这种框架时，移除不须要的 CSS 代码就变得尤其重要。

PurgeCSS 是一个可以经过字符串对比，来决定移除不须要的 CSS 的工具。这能带来一些好处，但也存在要注意的点，因此特别留意一下我接下来要提到的白名单部分。

举个例子，VueDose’s website 是创建在应用框架 Nuxt 和 UI 框架 Tailwind 之上的，而且经过 PurgeCSS 这个工具来优化了 CSS 代码。

在不启用 PurgeCSS 时，你能够看到 tailwind.css 这文件足足有 485 KB：

在启用 PurgeCSS 后，tailwind.css 直接被压缩到了 16 KB：

对于 PurgeCSS 的配置因项目不一样而异，它不只能够做为 webpack 的插件，还能够做为 postcss 的插件。

以 VueDose 官网为例，我将 PurgeCSS 用做为 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 字段，来告诉 PurgeCSS 去哪里查找将要对应匹配的 class。

其次，对于一些你不想要移除的 class 或者某些标签上对应的样式名称，你能够它们加到白名单字段中。你至少须要添加 html 和 body 标签以及任意的动态 class 样式名称到白名单配置字段中。

在个人 VueDose 官网项目中，我使用了 prismjs 来高亮代码段，这个库会添加一些名为 token 的 class，以及一些样式代码到 pre 和 code 元素上。为了可以排除掉这些不须要应用 PurgeCSS 的地方，我用上了 whitelistPatternsChildren 这个属性。

另外的，Tailwind 须要一个自定义 extractor 来与 PurgeCSS 配合使用。VueDose 官网项目中所使用的 postcss.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
};
复制代码

这就是今天的内容啦~

你能够在线阅读这篇 原文，里面有可供复制粘贴的源代码。若是你喜欢这个系列的话，请分享给你的同事们！

下周再见哦。

结语

此系列的其余文章，会同步系列官网的发布状况，及时地翻译发布到掘金。请持续关注「程序猿何大叔」，相信我会给你们带来更多优质的内容，不要忘了点赞~

若是想要了解译者的更多，请查阅以下：

• 我的博客：blog.hadesz.com
• 我的 github 仓库：github.com/hadeshe93
• 我的微信公众号：搜索「程序猿何大叔」

请求翻译受权记录

---

以为本文不错的话，分享一下给小伙伴吧~