webpack4 CSS Tree Shaking的使用


Posted in Javascript onSeptember 03, 2018

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

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="./dist/app.bundle.js"></script>
</body>
</html>

按照我们的仿真的环境,最终 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,就没有出现在图片中。成功!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
Javascript中的arguments对象
Jun 20 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 #Javascript
webpack4 处理SCSS的方法示例
Sep 03 #Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 #Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 #Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 #Javascript
详解jQuery中的easyui
Sep 02 #jQuery
vue-cli脚手架的安装教程图解
Sep 02 #Javascript
You might like
建立文件交换功能的脚本(三)
2006/10/09 PHP
php xfocus防注入资料
2008/04/27 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
php实现购物车功能(下)
2016/01/05 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
prototype1.4中文手册
2006/09/22 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python mysqldb连接数据库
2009/03/16 Python
Python编程中的异常处理教程
2015/08/21 Python
Python实现新浪博客备份的方法
2016/04/27 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python时间time模块处理大全
2020/10/25 Python
python 如何停止一个死循环的线程
2020/11/24 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
会计主管岗位职责范文
2013/11/08 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
大学生活自我评价
2014/04/09 职场文书
关爱老人标语
2014/06/21 职场文书
学校查摆问题整改措施
2014/09/28 职场文书