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：