跳到主要内容

18-CSS中去除未使用样式

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

PurifyCSS​

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

安装PurifyCSS-webpack​

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

npm i -D purifycss-webpack purify-css

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

引入glob​

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

引入purifycss-webpack​

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

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

配置plugins​

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

4.png

这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。 注意：使用这个插件必须配合extract-text-webpack-plugin这个插件，这个插件在前边的课程已经讲解过了。如果你还不会请自学一下。 配置好上边的代码，我们可以故意在css文件里写一些用不到的属性，然后用webpack打包，你会发现没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins，因为这决定你代码的质量，非常有用。