在现代前端开发中，CSS 的体积日益增大成为了一个问题。为了优化 CSS 的加载速度和性能，很多开发者都采用了 Tree Shaking 技术。不过，在实际开发中，我们会发现虽然 JavaScript 中已经有了很好的 Tree Shaking 技术支持，但是在 CSS 中，Tree Shaking 还不是很顺畅。幸运的是，有了 css-treeshaking-loader 这个 npm 包，我们可以很方便地使用 Tree Shaking 技术来优化我们的 CSS，提高页面加载速度和性能。
css-treeshaking-loader 简介
css-treeshaking-loader 是一个专门为 CSS Tree Shaking 设计的 webpack loader。它能够分析我们的 CSS 代码，识别哪些代码没有使用，并将其从打包中去除，从而减小 CSS 的体积，提高网页加载速度。目前，css-treeshaking-loader 支持基于 class 名称和属性名称两种方式进行 Tree Shaking。
使用说明
1、安装
在项目根目录下通过 npm 安装 css-treeshaking-loader：
npm install css-treeshaking-loader -D
2、创建 webpack 配置文件
创建一个 webpack 配置文件，例如 webpack.config.js，并在其中配置 css-treeshaking-loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-------------
-
------- -------------------------
-------- -
----- --------
---------- ----------- -----------
-
-
-
-
-
-
-在上面的配置中，我们对 CSS 文件的处理引入了 css-treeshaking-loader，并配置了 mode 和 whitelist 参数。其中，mode 参数表示 Tree Shaking 的方式，可选值为 class 和 attr，分别表示基于 class 名称和属性名称进行 Tree Shaking；whitelist 参数代表了一些在 Tree Shaking 时需要保留的 class 名称或属性名。
3、编写示例代码
在项目中编写一个示例 CSS 文件，例如 style.css：
-- -------------------- ---- ------- ------- - ---------- ----- - ------- - ------ ----- - ---- - ------------ ----- - ---- - ----------------- ----- -
4、运行打包
运行 webpack 打包，观察生成的导出文件，我们可以发现，Tree Shaking 后的 CSS 的体积比原来的 CSS 文件要小。例如，在上面的示例中，假设我们使用基于 class 名称的 Tree Shaking 方式，并配置了 whitelist 参数，那么打包生成的 CSS 文件应该类似于下面这样：
.header {
font-size: 16px;
}
.footer {
color: #333;
}可以看出，在去除了未使用的 CSS 属性之后，这个文件变成了仅包含 header 和 footer 样式的简单文件。
总结
css-treeshaking-loader 是一个非常优秀的 CSS Tree Shaking 工具，可以在前端开发中大大优化网页的加载速度和性能。只要按照上面的步骤进行简单的配置和使用，我们就可以非常方便地使用这个工具来实现优化。建议在你的项目中尝试使用 css-treeshaking-loader，以便更好地优化你的 CSS，并提高网页性能表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc181e8991b448dd167