PurgeCSS

提示

配置作用：在 vue 项目中使用，删除未使用的 CSS 代码，达到减少项目打包压缩的作用

• 1. PurgeCSS 删除未使用的 CSS 代码

在提高 web 性能的方法中，可以通过移除不需要的 js 和 css 达到性能提高。 PurgeCSS 是一个用来删除未使用的 CSS 代码的工具 PurgeCSS

安装项目依赖

vue add @fullhuman/purgecss

安装成功后会在项目创建postcss.config.js文件

postcss.config.js 文件修改

• content 字段，来告诉 PurgeCSS 去哪里查找将要对应匹配的 class
• whitelist 对于一些你不想要移除的 class 或者某些标签上对应的样式名称，你可以它们加到白名单字段中。你至少需要添加 html 和 body 标签以及任意的动态 class 样式名称到白名单配置字段中

const IN_PRODUCTION = process.env.NODE_ENV === 'production'

module.exports = {
  plugins: [
    IN_PRODUCTION &&
      require('@fullhuman/postcss-purgecss')({
        content: [
          `./public/**/*.html`,
          `./src/**/*.vue`,
          `./layouts/**/*.vue`,
          `./components/**/*.vue`,
          `./pages/**/*.vue`
        ],
        whitelist: ['html', 'body'],
        defaultExtractor(content) {
          const contentWithoutStyleBlocks = content.replace(
            /<style[^]+?<\/style>/gi,
            ''
          )
          return (
            contentWithoutStyleBlocks.match(
              /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
            ) || []
          )
        },
        safelist: [
          /-(leave|enter|appear)(|-(to|from|active))$/,
          /^(?!(|.*?:)cursor-move).+-move$/,
          /^router-link(|-exact)-active$/,
          /data-v-.*/
        ]
      })
  ]
}