0. 课程介绍和资料
本次课程的代码目录(如下图所示):
1. CSS 也有 Tree Shaking?
是滴,随着 webpack 的兴起,css 也可以进行 Tree Shaking: 以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。
为了方便理解 Tree Shaking 概念,并且与 JS Tree Shaking 进行横向比较,请查看:webpack4 系列教程(八): JS Tree Shaking
2. 项目环境仿真
因为 CSS Tree Shaking 并不像 JS Tree Shaking 那样方便理解,所以首先要先模拟一个真实的项目环境,来体现 CSS 的 Tree Shaking 的配置和效果。
我们首先编写 /src/css/base.css
样式文件,在文件中,我们编写了 3 个样式类。但在代码中,我们只会使用 .box
和 .box--big
这两个类。代码如下所示:
/* base.css */
html {
background: red;
}
.box {
height: 200px;
width: 200px;
border-radius: 3px;
background: green;
}
.box--big {
height: 300px;
width: 300px;