翻译：使用PurgeCSS删除未使用的CSS

前言

为了提升英文水平，尝试着翻译一些英文技术文章，首先就从这个Vue的小技巧文章开始，目前英文版一共22篇。计划用时2~3个月翻译完成。

目前进度[5/22]

原文连接

Remove unused CSS with PurgeCSS

译文

咱们能够用不一样的方式处理Web性能，其中之一就是删除咱们在应用程序中不使用的全部JS和CSS。

就CSS而言，当咱们使用Bootstrap、Bulma或Tailwind等框架，以及面对大型应用程序或遗留应用程序时，这一点甚至更为重要。

PurgeCSS是一种在应用程序中比较字符串来删除未使用的CSS的工具。这有一些优势，可是也有一些问题，因此请对后面的白名单部分保持关注。

例如，VueDese的网站是使用Tailwind在nuxt（静态生成）上构建的，它使用purgecss优化生成的CSS。

若是我禁用PurgeCSS，你会看到Tailwind css有485Kb。

若是我激活PurgeCSS，它会降到16kb:

每一个项目中PurgeCSS配置会有所不一样。它能够设置为Webpack插件或Postcss插件。

在VueDese这个案例中，我使用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属性查找匹配的类。

另外，你可能要设置白名单来标记一些类，省得被误删除。你至少须要在html和body以及任何动态类中这样作。

在个人案例中，我会使用prismjs高亮代码块，而且添加了几个token类，以及pre和code标签中的样式。为了排除它们（不使用PurgeCSS删除），我须要使用whitelistPatternsChildren属性。

此外，Tailwind还须要一个自定义提取器（这里参考得是Tailwind文档上得方法），以便与purgecss一块儿正常工做。总之，VueDese的整个postss.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
};
复制代码

今天就到此为止！

你能够在线阅读文章tip online（能够 复制/粘贴 代码），可是请你记住，若是你喜欢，要和全部同事分享VueDose。

下周见。

个人理解

当你的项目足够大的或者足够复杂或者有很大的遗留包袱的时候，你能够经过一些手段，去删除代码中无用的js和css，这样作会大大减小你的项目体积！这篇文章介绍了使用Postcss插件采用PurgeCSS的方式去删除css，而且使用应用了Tailwind框架案例作出了代码说明。

关于更多的PurgeCSS请前往github。

关于去除无用css还有一个好用的库UnCSS，想要了解详情请前往github

结尾

水平有限，不免有错漏之处，望各位大大轻喷的同时可以指出，跪谢！

其它翻译

一、翻译：提升vue.js中大型数据的性能
二、翻译：测量vue应用运行时的性能！
三、使用PurgeCSS删除未使用的CSS
四、翻译：Vue.js 2.6.0 中的新指令v-slot
五、翻译：使用v-bind和v-on的自适应组件