vue删除⽆⽤css,【译】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 的插件，并为该项⽬创建了如下的 fig.js 配置⽂件：
const purgecss = require("@fullhuman/postcss-purgecss");
const plugins = [
// ...
];
if (v.NODE_ENV === "production") {
plugins.push(
purgecss({
content: [
"./layouts/**/*.vue",
"./components/**/*.vue",
"./pages/**/*.vue"
],
whitelist: ["html", "body"],
whitelistPatternsChildren: [/^token/, /^pre/, /^code/],
})
);
}
复制代码
⾸先，你所要做的就是使⽤ content 字段，来告诉 PurgeCSS 去哪⾥查将要对应匹配的 class。
其次，对于⼀些你不想要移除的 class 或者某些标签上对应的样式名称，你可以它们加到⽩名单字段中。你⾄少需要添加 html 和 body 标签以及任意的动态 class 样式名称到⽩名单配置字段中。
在我的 VueDose 官⽹项⽬中，我使⽤了prismjs 来⾼亮代码段，这个库会添加⼀些名为 token 的 class，以及⼀些样式代码到 pre 和code 元素上。为了能够排除掉这些不需要应⽤ PurgeCSS 的地⽅，我⽤上了 whitelistPatternsChildren 这个属性。
另外的，Tailwind 需要⼀个⾃定义extractor 来与 PurgeCSS 配合使⽤。VueDose 官⽹项⽬中所使⽤的 fig.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 (v.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"]
bootstrap项目}
]
})
);
}
plugins
};
复制代码
这就是今天的内容啦~
你可以在线阅读这篇原⽂，⾥⾯有可供复制粘贴的源代码。如果你喜欢这个系列的话，请分享给你的同事们！下周再见哦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。