- 原文地址: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
- 个人微信公众号:搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话,分享一下给小伙伴吧~