伏龙阁资源网

webpack4 CSS Tree Shaking的使用
站长资源 2024/11/27 佚名
2 0

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

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

/* 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="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./dist/app.min.css" rel="external nofollow" >
 <title>Document</title>
</head>
<body>
 <div id="app">
 <div class="box-big"></div>
 </div>
 <script src="/UploadFiles/2021-04-02/app.bundle.js">


按照我们的仿真的环境，最终 Tree Shaking 之后的效果应该是：打包后的 css 文件不含有 box-small 样式类。下面，就实现这个效果！


3. 认识下 PurifyCSS




没错，就是这货帮助我们进行 CSS Tree Shaking 操作。为了能准确指明要进行 Tree Shaking 的 CSS 文件，它还有好朋友 glob-all （另一个第三方库）。


glob-all 的作用就是帮助 PurifyCSS 进行路径处理，定位要做 Tree Shaking 的路径文件。


它们俩搭配起来，画风如下：





const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");

let purifyCSS = new PurifyCSS({
 paths: glob.sync([
 // 要做CSS Tree Shaking的路径文件
 path.resolve(__dirname, "./*.html"),
 path.resolve(__dirname, "./src/*.js")
 ])
});







好了，这只是一个小小的 demo。下面我们要把它用到我们的webpack.config.js中来。


4. 编写配置文件




为了方便最后检查打包后的 css 文件，配置中还使用了 extract-text-webpack-plugin 这个插件。如果忘记了它的用法，请查看：


webpack4 系列教程(六): 处理 SCSS

webpack4 系列教程(五): 处理 CSS




所以，我们的package.json文件如下：





{
 "devDependencies": {
 "css-loader": "^1.0.0",
 "extract-text-webpack-plugin": "^4.0.0-beta.0",
 "glob-all": "^3.1.0",
 "purify-css": "^1.2.5",
 "purifycss-webpack": "^0.7.0",
 "style-loader": "^0.21.0",
 "webpack": "^4.16.0"
 }
}






安装完相关插件后，我们需要在 webpack 的plugins配置中引用第三部分定义的代码。


然后结合extract-text-webpack-plugin的配置，编写如下webpack.config.js:





// webpack.config.js
const path = require("path");
const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
 filename: "[name].min.css",
 allChunks: false
});

let purifyCSS = new PurifyCSS({
 paths: glob.sync([
 // 要做CSS Tree Shaking的路径文件
 path.resolve(__dirname, "./*.html"), // 请注意，我们同样需要对 html 文件进行 tree shaking
 path.resolve(__dirname, "./src/*.js")
 ])
});

module.exports = {
 entry: {
 app: "./src/app.js"
 },
 output: {
 publicPath: __dirname + "/dist/",
 path: path.resolve(__dirname, "dist"),
 filename: "[name].bundle.js",
 chunkFilename: "[name].chunk.js"
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
  fallback: {
  loader: "style-loader",
  options: {
  singleton: true
  }
  },
  use: {
  loader: "css-loader",
  options: {
  minimize: true
  }
  }
 })
 }
 ]
 },
 plugins: [extractTextPlugin, purifyCSS]
};





5. 结果分析




命令行运行webpack打包后，样式文件被抽离到了 /dist/app.min.css 文件中。文件内容如下图所示（肯定好多朋友懒得手动打包）：


webpack4 CSS Tree Shaking的使用


我们在index.html 和 src/app.js 中引用的样式都被打包了，而没有被使用的样式类--box-small，就没有出现在图片中。成功！




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接