webpack 使用 purify-css purifycss-webpack 清除无用css

webpack2.x开始⽀持 tree shaking概念,顾名思义,"摇树",清除⽆⽤ css,js(Dead Code)
Dead Code ⼀般具有以下⼏个特征

  • 代码不会被执⾏,不可到达
  • 代码执⾏的结果不会被⽤到
  • 代码只会影响死变量(只写不读)
  • Js tree shaking只⽀持ES module的引⼊⽅式
npm i glob-all purify-css purifycss-webpack --save-dev
// webpack 配置
const PurifyCSS = require('purifycss-webpack')
const glob = require('glob-all')
plugins:[
 // 清除⽆⽤ css
 new PurifyCSS({
     paths: glob.sync([
         // 要做 CSS Tree Shaking 的路径⽂件
         path.resolve(__dirname, './src/*.html'), // 请注意,我们同样需要对 html ⽂件进⾏ tree shaking
         path.resolve(__dirname, './src/*.js')
     ])
 })
]
posted @ 2021-02-02 11:20  渡心°  阅读(735)  评论(0编辑  收藏  举报