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 的插件，并为该项目创建了如下的 配置文件：

首先，你所要做的就是使用 字段，来告诉 PurgeCSS 去哪里查找将要对应匹配的 class。

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

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

另外的，Tailwind 需要一个自定义 extractor 来与 PurgeCSS 配合使用。VueDose 官网项目中所使用的 配置文件，其所有内容如下所示：

这就是今天的内容啦~

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

下周再见哦。

结语