阅读 870

翻译:使用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类,以及precode标签中的样式。为了排除它们(不使用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

结尾

水平有限,难免有错漏之处,望各位大大轻喷的同时能够指出,跪谢!

其它翻译

1、翻译:提高vue.js中大型数据的性能
2、翻译:测量vue应用运行时的性能!
3、使用PurgeCSS删除未使用的CSS
4、翻译:Vue.js 2.6.0 中的新指令v-slot
5、翻译:使用v-bind和v-on的自适应组件

关注下面的标签,发现更多相似文章
评论