webpack/vue-cli中如何实现css的treeshaking

本文链接：https://blog.csdn.net/m0_61732154/article/details/139299286

大家都知道在项目中有JS的treeshaking，那么CSS可不可以也实现treeshaking呢，当然可以，其实就是删除项目里面未使用的CSS内容，和JS的树摇类似，想象一下，对项目的生产构建优化是有多大的帮助哈。今天在项目优化的时候，发现网上大多数都是webpack项目去使用purgecss-webpack-plugin，下面我将总结一下webpack及vue-cli项目两种不同的配置方式！

一、weback中实现css的treeshaking：

1.安装插件purgecss-webpack-plugin：

npm i purgecss-webpack-plugin

npm install  glob (用来辅助文件读取)

2.修改webpack.config.js配置文件：

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');

module.exports = {
  // ...其他配置
  plugins: [
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, './src/*.html'),
        path.join(__dirname, './src/**/*.vue'),
        // 更多匹配规则可以根据实际需求添加
      ]),
    }),
    // ...其他插件
  ],
};

二、vue-cli实现css的treeshaking：

1.安装插件purgecss-webpack-plugin：

npm i purgecss-webpack-plugin

npm install glob

2.修改vue.config.js文件：（未成功，记录踩坑）

方式一：通过chainWebpack链式操作

const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('PurgeCSSPlugin').use(PurgeCSSPlugin, [
        {
          paths: glob.sync([
            path.join(__dirname, './src/*.vue'),
            path.join(__dirname, './node_modules/your-library/**/*.vue'),
            // 添加其他需要处理的文件路径
          ]),
          // 其他配置...
        }
      ]);
    }
  }
};

方式二：通过configureWebpac实现 webpack-merge 合并到最终的配置

const glob = require('glob');
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');
const PurgeCSSPluginConfig = process.env.NODE_ENV === 'production' ? [new PurgeCSSPlugin({
    // paths: glob.sync(path.resolve(__dirname, "src") + '/**/*', { nodir: true }),
    paths: glob.sync([
        path.join(__dirname, 'src/**/*.vue'),
        path.join(__dirname, 'src/**/*.scss'),
        path.join(__dirname, 'src/**/*.css'),
    ]),
})] : []

 plugins: [
            ...PurgeCSSPluginConfig 
        ]

两种方式结果：css文件在打包后体积明显下降，但是项目运行后缺少大量css样式。

3.网上查询帖子未果，很少关于vue-cli的css树摇话题，在官网找到新方法：

purgecss-webpack-plugin官网的链接：Introduction | PurgeCSS

在purgecss官网的用法中：我注意到了下面这句话：大多数用于构建网站的打包器和框架都使用 PostCSS，配置 PurgeCSS 最简单的方法是使用其 PostCSS 插件。（咦，言下之意，就是如果工程化本身是基于postCss，那么配置将会更加简单）

接着，果然在脚手架的官网中，看到与上面呼应的一句话: Vue CLI 内部使用了 PostCSS，并且支持使用配置源来配置 PostCSS。

vue-cli的官网链接：CSS 相关 | Vue CLI

开始实践：

1.按照vue-cli官网的说法，我需要通过postcss-load-config，于是，安装postcss-load-config（用于手动修改postcss的配置）

npm i -D postcss-load-config

2.在postcss-load-confi插件的用法说明：我选择了新增postcss.config.js配置文件的方式

3.postcss.config.js添加内容：

const purgecss = require('@fullhuman/postcss-purgecss')

const purgecssConfig = process.env.NODE_ENV === 'production' ? [
    purgecss({
        content: ['./src/**/*.vue', './src/**/*.scss', './src/**/*.css']
    })
] : []

module.exports = {
    plugins: [
        ...purgecssConfig
    ]
}

结果：css文件在打包后体积明显下降，项目也成功运行。