- 教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步
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; border-radius: 5px; background: red; } .box-small { height: 100px; width: 100px; border-radius: 2px; background: yellow; }按照正常使用习惯，DOM 操作来实现样式的添加和卸载，是一贯技术手段。所以，入口文件
/src/app.js中创建了一个<div>标签，并且将它的类设为.box// app.js import base from "./css/base.css"; var app = document.getElementById("app"); var div = document.createElement("div"); div.className = "box"; app.appendChild(div);最后，为了让环境更接近实际环境，我们在
index.html的一个标签，也引用了定义好的box-big样式类。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
