webpack 消除未使用的CSS

第14节：CSS进阶：消除未使用的CSS

像Bootstrap这样的框架往往会带有很多CSS。在项目中通常我们只使用它的一小部分。就算我们自己写CSS，随着项目的进展，CSS也会越来越多，有时候需求更改，带来了DOM结构的更改，这时候我们可能无暇关注CSS样式，造成很多CSS的冗余。这节课就学习用webpack消除未使用的CSS。

PurifyCSS

使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。

安装PurifyCSS-webpack

从名字你就可以看出这是一个插件，而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装。

1	npm i - D purifycss - webpack purify - css

这里的-D代表的是–save-dev ,只是一个简写。

引入glob

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

1	const glob = require ( 'glob' ) ;

引入purifycss-webpack

同样在webpack.config.js文件头部引入purifycss-webpack

1	const PurifyCSSPlugin = require ( "purifycss-webpack" ) ;

配置plugins

引入完成后我们需要在webpack.config.js里配置plugins。代码如下，重点看标黄部分。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

plugins : [      //new uglify()      new htmlPlugin ( {          minify : {              removeAttrubuteQuotes : true          } ,          hash : true ,          template : './src/index.html'               } ) ,      new extractTextPlugin ( "css/index.css" ) ,      new PurifyCSSPlugin ( {          // Give paths to parse for rules. These should be absolute!          paths : glob . sync ( path . join ( __dirname , 'src/*.html' ) ) ,          } )   ]

这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。

注意：使用这个插件必须配合extract-text-webpack-plugin这个插件，这个插件在前边的课程已经讲解过了。如果你还不会请自学一下。

配置好上边的代码，我们可以故意在css文件里写一些用不到的属性，然后用webpack打包，你会发现没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins，因为这决定你代码的质量，非常有用。