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

時間 2019-12-06

標籤 vue 奇技第三 purgecss 移除須要 css 欄目 CSS 简体版

原文原文鏈接

原文地址：Measure runtime performance in Vue apps

原文做者：Alex Jover

譯者：程序猿何大叔

特別聲明：本文是做者 Alex Jover 發佈在 VueDose 上的一個系列。css

版權歸做者全部。html

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。vue

爲了避免影響你們閱讀，得到受權的記錄會放在本文的最後。webpack

咱們有不少能夠提升 web 性能的方法，而其中一種就是把所不須要的 JS 和 CSS，從咱們的應用中所有移除掉。git

當咱們須要面對大型應用或者老舊項目，且其中使用了相似 Bootstrap、Bulma 或 Tailwind 這種框架時，移除不須要的 CSS 代碼就變得尤其重要。github

PurgeCSS 是一個可以經過字符串對比，來決定移除不須要的 CSS 的工具。這能帶來一些好處，但也存在要注意的點，因此特別留意一下我接下來要提到的白名單部分。web

舉個例子，VueDose’s website 是創建在應用框架 Nuxt 和 UI 框架 Tailwind 之上的，而且經過 PurgeCSS 這個工具來優化了 CSS 代碼。微信

在不啓用 PurgeCSS 時，你能夠看到 tailwind.css 這文件足足有 485 KB： app

在啓用 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
};
複製代碼