第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,因为这决定你代码的质量,非常有用。