webpack4 CSS Tree Shaking的使用

前端之家收集整理的这篇文章主要介绍了webpack4 CSS Tree Shaking的使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本次课程的代码目录(如下图所示):

什么是tree-shaking

webpack 2 的到来带来的最棒的新特性之一就是tree-shaking 。tree-shaking源自于rollup.js,先如今,webpack 2也有类似的做法。

webpack 里的tree-shaking的到来不得不归功于es6规范的模块。为什么这么说,如今的前端模块规范很多,比较出流行的比如commonJS,AMD,es6 ,我简单的说一下commonJS和es6模块的区别。

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 这两个类。代码如下所示:

.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 中创建了一个

标签,并且将它的类设为 .Box

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 样式类。

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> Document
Box-big">

猜你在找的JavaScript相关文章