【譯】Vue 的小奇技（第三篇）：用 PurgeCSS 移除不需要的 CSS
特別宣告：本文是作者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
};
複製程式碼
這就是今天的內容啦~
你可以線上閱讀這篇原文，裡面有可供複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！
下週再見哦。