css tree shaking 是一个术语，通俗点就是移除项目中我们没有用到css代码，减小css的打包体积。
需要3个插件PurifyCSS，glob-all，purifycss-webpack。
（1）PurifyCSS 将帮助我们进行 CSS Tree Shaking 操作。为了能准确指明要进行 Tree Shaking 的 CSS 文件。
（2）glob-all 的作用就是帮助 PurifyCSS 进行路径处理，定位要做 Tree Shaking 的路径文件。使用purifycss的时候要用到glob.sync方法.
安装依赖
npm i purify-css purifycss-webpack glob-all --save-dev
css 的Tree Shaking实际上是对打包后的文件进行Tree Shaking，也就是说我们要处理的实际上是打包后的文件。假如我们打包后的文件目录如下：
打包后的dist文件目录.png
那么我们要处理的也就是dist文件夹下的文件（一定要处理里面涉及到的css的所有文件，也就是本案例里的.html, .js .css类型文件）
webpack.config.js配置如下：
const MiniCssExtractPlugin = require("mini-css-extract-plugin") const PurifyCSS = require("purifycss-webpack"); const glob = require("glob-all"); plugins:[ new MiniCssExtractPlugin({ filename: isDev ? '[name].css' : 'static/css/[name].[chunkhash:8].css', }), new PurifyCSS({ paths: glob.sync([ path.join(__dirname,'./dist/*.html'), path.join(__dirname,'./dist/static/css/*.css'),//目录太深可以用匹配符'./dist/**/*.css' path.join(__dirname,'./dist/static/js/*.js')//目录太深可以用匹配符'./dist/**/*.js' ]) }), ]
注意点：
1、new PurifyCSS一定要在new MiniCssExtractPlugin后。
2、要处理的文件路径一定要对。
3、正确处理文件，一定要处理所有的涉及到css的文件。（本案例里只有.html, .js .css这3种类型会涉及到css样式，如果你的项目里有其他文件类型，请自行添加）。
关于path.join可以参考：https://www.jianshu.com/p/dd3bfaf7d0ad
