vuedose.tips（系列翻译三）

Remove unused CSS with PurgeCSS

我们可以采用不同的方式来处理网络性能问题，其中之一就是删除所有未在应用程序中使用的JS和CSS。

就CSS而言，当我们使用Bootstrap，Bulma或Tailwind之类的框架时，以及面对大型或旧版应用程序时，这一点尤为重要。

PurgeCSS是一种通过应用字符串比较来删除未使用的CSS的工具。这既有优势，也有一些警告，所以请稍后再关注白名单部分。

例如，VueDose的网站是使用Tailwind在Nuxt（静态生成的）上构建的，并且使用PurgeCSS优化生成的CSS。 如果禁用PurgeCSS，则可以看到TailWind css为485 KB

image

如果我激活它，它会减少到16 KB

image

每个项目中的PurgeCSS配置可以不同。可以将其设置为webpack插件或postcss插件。

对于VueDose，我将其用作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 来突出显示代码块，并在pre和code标记中添加了多个标记类以及样式。为了排除它们，我需要使用whitelistPatternsChildren属性

此外，Tailwind需要自定义提取器才能与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
}

请接着看下一小节