uniapp 减小包体积,同样适用vue项目 在vuecli中使用 @fullhuman/postcss-purgecss 达到去除多余css样式

插件大名@fullhuman/postcss-purgecss

使用此插件后无法开发多端项目,因为h5页面是uni自定义的类名,插件是通过字符匹配来校验是否使用类名

提前注意事项: 如果出现了某些样式被插件失误清除可以直接在生产模式使用此功能,或者在插件的函数里面加上一段代码(任一代码) 目的就是让插件重新进行代码清除 一些都变回正常^_

• 你可能需要的文档

  • 插件官网

  • npm文档地址

  • postcss-loade相关配置-webpack

  • css.loaderOPtions配置文档所在

• 小说明:此插件是 postcss附属的一个vue插件

• 安装npm i @fullhuman/postcss-purgecss -D

  • 官方文档安装方法:vue add @fullhuman/purgecss,结果却是不尽人意,postcss配置被重写了,很尴尬,css样式一番报错

  • 报错原因 vuecli文档中 使用vue add命令的警告,我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件(说明vue add命令有很大可能会改变cli配置)

  • 小问题(很重要,请仔细看下)

//提示:当你注释html代码的时候,例如下面的示例

//在dev模式下css代码不会被过滤掉,必须把注释的标签删除掉,这样css样式代码才会被过滤掉

//在product模式下 css代码被编译为 .azhen 虽然样式被清除了,但是类名依然存在,所以动动小手把注释的html代码清除掉吧

//html代码
<!-- <div class="azhen"></div> -->

//css代码
.azhen{
   color: #fff;
 }

开始配置(代码示例里面我贴上了文档中的代码示例,不要被其干扰)

• 新建vue.config.js

• 在这里 我们使用cli里面的css.loaderOPtions 配置,vue文档里面没有过多去解释;怎么在此处配置其他css插件;刚开始我以为postcss仅仅是一个插件,怎么能在里面使用plugs呢,后来去看了下webpack,才明白在这个里面可以配置一些其他插件

// vue中的配置示例
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        // 这里的选项会传递给 postcss-loader 就是在这里配置loader选项
      }
    }
  }
}
//webpack中的配置示例,具体的可以去看一下webpack配置,文档已经在上面贴上
     postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // Options
                    },
                  ],
                ],
              },
//在这里贴上我的配置 配置文档已经在上面贴上了
const purgecss = require('@fullhuman/postcss-purgecss');
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [purgecss({
          content: [`./public/**/*.html`, `./src/**/*.vue`],
          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-.*/
          ],
        })]
      }
    }
  }
}