Webpack4: Tree-shaking 深度解析

什么是Tree-shaking

所谓Tree-shaking就是‘摇’的意思，作用是把项目中没必要的模块全部抖掉，用于在不同的模块之间消除无用的代码，可列为性能优化的范畴。

Tree-shaking早期由rollup实现，后来webpack2也实现了Tree-shaking的功能，但是至今还不是很完备。至于为什么不完备，可以看一下百度外卖的Tree-shaking原理

Tree-shading原理

Tree-shaking的本质用于消除项目一些不必要的代码。早在编译原理中就有提到DCE(dead code eliminnation)，作用是消除不可能执行的代码，它的工作是使用编辑器判断出某些代码是不可能执行的，然后清除。

Tree-shaking同样的也是消除项目中不必要的代码，但是和DCE又有略不相同。可以说是DCE的一种实现，它的主要工作是应用于模块间，在打包过程中抽出有用的部分，用于完成DCE。

Tree-shaking是依赖ES6模块静态分析的，ES6 module的特点如下：

  1. 只能作为模块顶层的语句出现
  2. import 的模块名只能是字符串常量
  3. import binding 是 immutable的

依赖关系确定，与运行时无关，静态分析。正式因为ES6 module的这些特点，才让Tree-shaking更加流行。

主要特点还是依赖于ES6的静态分析，在编译时确定模块。如果是require，在运行时确定模块，那么将无法去分析模块是否可用，只有在编译时分析，才不会影响运行时的状态。

Webpack4的Tree-shaking

webpack从第2版本就开始支持Tree-shaking的功能，但是至今也并不能实现的那么完美。凡是具有副作用的模块，webpack的Tree-shaking就歇菜了。

副作用

副作用在我们项目中，也同样是频繁的出现。知道函数式编程的朋友都会知道这个名词。所谓模块(这里模块可称为一个函数)具有副作用，就是说这个模块是不纯的。这里可以引入纯函数的概念。

对于相同的输入就有相同的输出，不依赖外部环境，也不改变外部环境。

符合上述就可以称为纯函数，不符合就是不纯的，是具有副作用的，是可能对外界造成影响的。

webpack自身的Tree-shaking不能分析副作用的模块。以lodash-es这个模块来举个例子

//test.js
import _ from "lodash-es";const func1 = function(value){return _.isArray(value);
}
const func2 = function(value){return value=null;
}export {func1,func2,
}
//index.js
import {func2} from './test.js'
func2()
复制代码

上述代码在test.js中引入lodash-es,在func1中使用了loadsh，并且这里不符合纯函数的概念，它是具有副作用的。func2是一个纯函数。

在index.js中只引入了func2，并且使用了func2，可见整个代码的执行是和func1是没有任何关系的。我们通过生产环境打包一下试试看(Tree-shaking只在生产环境生效)

main.js 91.7KB，可见这个结果是符合我们的预期的，因为func1函数的副作用，webpack自身的Tree-shaking并没有检测到这里有没必要的模块。解决办法还是用的，webpack的插件系统是很强大的。

webpack-deep-scope-plugin

webpack-deep-scope-plugin是一位中国同胞(学生)在Google夏令营，在导师Tobias带领下写的一个webpack插件。(此时慢慢的羡慕)

这个插件主要用于填充webpack自身Tree-shaking的不足，通过作用域分析来消除无用的代码。

插件的原理

这个插件是基于作用域分析的，那么都有什么样的作用域？

// module scope start// Block{ // <- scope start
} // <- scope end// Classclass Foo { // <- scope start} // <- scope end// If elseif (true) { // <- scope start} /* <- scope end */ else { // <- scope start} // <- scope end// Forfor (;;) { // <- scope start
} // <- scope end// Catchtry {} catch (e) { // <- scope start} // <- scope end// Functionfunction() { // <- scope start
} // <- scope end// Scopeswitch() { // <- scope start
} // <- scope end// module scope end
复制代码

对于ES6模块来说，上面作用域只有function和class是可以被导出的，其他的作用域可以称之为function和class的子作用域并不能被导出实际上归属于父作用域的。

插件通过分析代码的作用域，进而得到作用域与作用域之间的关系。

分析作用域

分析代码的作用域的基础是建立做AST(Abstract Syntax Tree)抽象语法树上面的。这个可以通过escope来完成。

拿到解析完的AST抽象语法树，利用图的深度优先遍历找到哪些作用域是可以被使用到的，哪些作用域是不可以被使用到的。从而分析作用域之间的关系和导出变量之间的关系。进而执行模块消除。

插件的不足

JavaScript中还是有一些代码是不会消去的。

根作用域的引用
import { isNull } from 'lodash-es';export function scope(...args) {return isNull(...args);
}复制代码

在根作用域引用到的作用域不会被消除。

给变量重新赋值
import _ from "lodash-es";var func1
func1 = function(value){return _.isArray(value);
}
const func2 = function(value){return value=null;
}export {func1,func2,
}
复制代码

上述代码中先定义了func1，然后又给func1赋值，这样缺少了数据流分析，同样插件也是不可以的。

纯函数调用

引用作者的例子

import _curry1 from './internal/_curry1';
import curryN from './curryN';
import max from './max';
import pluck from './pluck';var allPass = /*#__PURE__*/_curry1(function allPass(preds) {return curryN(reduce(max, 0, pluck('length', preds)), function () {var idx = 0;var len = preds.length;while (idx < len) {if (!preds[idx].apply(this, arguments)) {return false;}idx += 1;}return true;});
});
export default allPass;
复制代码

当一个匿名函数被包在一个函数调用中(IIFE也是如此)，那么插件是无法分析的。但是如果加上/*#__PURE__*/注释的话，这个插件会把这个函数调用当作一个独立的域，tree-shaking是可以生效的。

探讨的一些问题

我们都知道在这个ES6泛滥的时代，ES6的代码在项目中出现已经很广泛。（先不考虑线上环境打包成ES5）。上面提到插件的利用作用域来分析。能导出的作用域只有class和funciton。function的情况在上面已经说过，现在来探讨一下class的情况。

no plugin

当不使用插件的时候，我们来看一下会不会Tree-shaking，预期是会被Tree-shaking。书写下面这样一段简单的代码。

class Test{init(value){console.log('test init');}
}
export {Test,
}
复制代码

我们发现在没有使用插件的情况下，被Tree-shaking了。预期相同。

no plugin + 副作用

当我们在不适用插件的情况下，并且引入副作用，观察一下会不会打包，预期是不会打包。书写下面代码。

class Test{init(value){console.log('test init');return _.isArray(value);}
}
export {Test,
}
复制代码

观察打包结果，main.js 91.7KB，并没有被Tree-shaking，符合预期的结果。

plugin + 副作用

当我们使用插件并且代码中存在副作用的情况下，观察打包情况。由于上面的插件原理的铺垫，我们预期这次是可以Tree-shaking的。利用上例代码来测试。

我们观察可以看出main.js 6.78KB,Tree-shaking生效。

plugin + 副作用 + babel

由于用户浏览器对ES6支持度不够的原因，线上的代码不能全是ES6的，有时候我们要把ES6的代码打包成ES5的，放到线上环境来执行。利用上例代码来测试。

？？？ 什么鬼，我没有用到它，为什么这么大？？？ 一串懵逼

成也babel，败也babel

懵逼懵逼，babel成就了线上生产环境，但失去了Tree-shaking优化。我们来看看怎么回事。

没有副作用的情况

当去除调副作用的时候我们来打包一下。

没有找到test init Tree-shaking生效。为什么呢？我们使用babel线上工具编译一下源代码。

"use strict";function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {return right[Symbol.hasInstance](left); } else {return left instanceof right; } }function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } 
}function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } 
}function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }var Test =/*#__PURE__*/function () {function Test() {_classCallCheck(this, Test);}_createClass(Test, [{key: "init",value: function init(value) {console.log("test init")}}]);return Test;}();
复制代码

上面可以看到最新的babel和webpack有了契合，在Test立即执行函数的地方使用了 /*#__PURE__*/(忘记可以往上看)，让下面的IIFE变成可分析的，成功了使用了Tree-shaking。

有副作用的情况下

上面探讨情况的时候就得知有副作用的情况下，不可以被打包的。ES6编译代码如下。

"use strict";function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {return right[Symbol.hasInstance](left); } else {return left instanceof right; } }function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } 
}function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } 
}function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }var Test =/*#__PURE__*/function () {function Test() {_classCallCheck(this, Test);}_createClass(Test, [{key: "init",value: function init(value) {console.log("test init")return _.isArray(value);}}]);return Test;}();
复制代码

这里虽然bable新版契合了webpack，但是还是有一些问题。自己也没有找出是哪里除了问题，作者说JavaScript代码还是有一些是不可以清除的，也许就出现到这里。提供一个作者的插件Demo。

babel的解决方案

无论是ES6，还是ES5，Tree-shaking不能生效的原因总的归根结底还是因为代码副作用的问题。可想而知代码的书写规范是多么重要。这里我所想出的解决方案有两种。

1.代码的书写规范，尽量避免副作用。

书写代码过程中尽量使用纯函数的方式来写代码，保持书写规范，不让代码有副作用。例如把class类引用的副作用改成纯的。

class Test{init(value,_){  //参数引入lodash模块console.log('test init');return _.isArray(value);}
}
export{Test，
}
复制代码

可以看出，没有副作用的ES6代码编译成ES5，Tree-shaking也是生效的。

2.灵活使用ES6代码

两套代码。当浏览器支持的时候，就使用ES6的代码，ES5的代码。此方案可参考浏览器支持ES6的最优解决方案

总结

项目中难免会一些用不到的模块占位置影响我们的项目，Tree-shaking的出现也为开发者在性能优化方面提供了非常大的帮助，灵活使用Tree-shaking才能让Tree-shaking发挥作用，处理好项目中代码的副作用可以使项目更加的完美。

引用文章

webpack 如何通过作用域分析消除无用代码

Tree-Shaking性能优化实践 - 原理篇

原文发布于Webpack4:Tree-shaking深度解析

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/449466.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

真格量化——GFTD策略

真格量化——GFTD策略

#!/usr/bin/env python # coding:utf-8 from PoboAPI import * import datetime import numpy as np import math#开始时间，用于初始化一些参数 def OnStart(context) :print "I\m starting..."#设置全局变量g.signalcount = 0 g.signal_list = []g.buysignal = 0 g…
阅读更多...
解决org.hibernate.loader.custom.NonUniqueDiscoveredSqlAliasException: Encountered a duplicated sql ...

解决org.hibernate.loader.custom.NonUniqueDiscoveredSqlAliasException: Encountered a duplicated sql ...

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 报错如题&#xff1a; org.hibernate.loader.custom.NonUniqueDiscoveredSqlAliasException: Encountered a duplicated sql alias [id]…
阅读更多...
Spring WebFlux 响应式编程学习笔记(一)

Spring WebFlux 响应式编程学习笔记(一)

各位Javaer们&#xff0c;大家都在用SpringMVC吧&#xff1f;当我们不亦乐乎的用着SpringMVC框架的时候&#xff0c;Spring5.x又悄(da)无(zhang)声(qi)息(gu)的推出了Spring WebFlux。web? 不是已经有SpringMVC这么好用的东西了么&#xff0c;为啥又冒出个WebFlux&#xff1f;…
阅读更多...
Django Rest Framework -解析器

Django Rest Framework -解析器

基本代码结构 urls.py rom django.conf.urls import url, include from web.views.s5_parser import TestViewurlpatterns [url(rtest/, TestView.as_view(), nametest), ]views.py from rest_framework.views import APIView from rest_framework.response import Response f…
阅读更多...
真格量化——菜粕策略

真格量化——菜粕策略

#!/usr/bin/env python # coding:utf-8 from PoboAPI import * import datetime import time import numpy as np from copy import *#开始时间，用于初始化一些参数 def OnStart(context) :context.myacc = None#登录交易账号if context.accounts["回测期货"].Login…
阅读更多...
PostgreSQL查看版本信息

PostgreSQL查看版本信息

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.查看客户端版本 psql --version 1 2.查看服务器端版本 2.1 查看详细信息 select version(); 1 2.2 查看版本信息 show server_ve…
阅读更多...
U盘版便携式Linux制作, casper-rw 解析

U盘版便携式Linux制作, casper-rw 解析

一直都在想&#xff0c;不管用谁的电脑&#xff0c;我都可以得到一个完全一致的工作环境&#xff0c;上面有我喜爱的软件&#xff0c;有我保存的重要资料&#xff0c;甚至浏览器的各种偏好都得一模一样&#xff01;现在的云计算技术可以部分解决这个问题&#xff0c;但是远远不…
阅读更多...
真格量化-50ETF期权波动率策略

真格量化-50ETF期权波动率策略

#!/usr/bin/env python # coding:utf-8 from PoboAPI import * import datetime import time import numpy as np #日线级别 #开始时间，用于初始化一些参数 def OnStart(context) :print("I\m starting...")#设定一个全局变量品种,本策略交易50ETF期权g.code = Get…
阅读更多...
canvas反向裁剪技巧

canvas反向裁剪技巧

我们都知道在canvas 可以通过clip来实现剪裁功能&#xff0c;其步骤一般是先设置要裁剪的区域&#xff08;路径&#xff09;&#xff0c;然后通过ctx.clip()的实现裁剪&#xff0c;裁剪之后&#xff0c;后续的绘制只能在裁剪的区域显示效果&#xff0c;比如如下一段代码&#x…
阅读更多...
set 和select 的区别

set 和select 的区别

简单赋值是没有区别的 转载于:https://www.cnblogs.com/bingyizhihun/p/10597908.html
阅读更多...
postgres大版本升级

postgres大版本升级

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。进行升级版本之前请一定做好备份&#xff01;查看当前版本&#xff1a;[postgresnode1 ~]$ psqlpsql (9.4.4)Type "help" for h…
阅读更多...
马上有钱：揭密25种成为有钱人的方法(图)

马上有钱：揭密25种成为有钱人的方法(图)

1、做你真正感兴趣的事—你会花很多时间在上面&#xff0c;因此你一定要感兴趣才行&#xff0c;如果不是这样的话&#xff0c;你不愿意把时间花在上面&#xff0c;就得不到成功。 2、自己当老板。为别人打工&#xff0c;你绝不会变成巨富&#xff0c;老板一心一意地缩减开支&a…
阅读更多...
无人承运平台系统流程图

无人承运平台系统流程图

转载于:https://www.cnblogs.com/procedureMonkey/p/10598052.html
阅读更多...
Neither the JAVA_HOME nor the JRE_HOME environment variable is defined

Neither the JAVA_HOME nor the JRE_HOME environment variable is defined

Centos7.5 启动tomcat报错 报错: Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable is needed to run this program原因:没有安装java 解决方法:安装java yum install java -y转载于:https://www.cnblogs…
阅读更多...
让自己变成一个上进的人

让自己变成一个上进的人

1.认真设计你的环境2.引入外部监督 求“绑架”3.获取不确定的反馈4.选择一条既细密&#xff0c;又永无止境的职业上升台阶。转载于:https://www.cnblogs.com/Julietma/p/10600241.html
阅读更多...
年买笔记本的8个小技巧 最适合自己才最好(组图)

年买笔记本的8个小技巧 最适合自己才最好(组图)

显然&#xff0c;智能手机和平板在一定程度上可以替代传统电脑&#xff0c;让我们可以随时随地上网、使用各种应用。不过&#xff0c;传统电脑也拥有它的不可替代性&#xff0c;比如移动办公、视频编辑、玩游戏&#xff0c;笔记本电脑可能是个更好的选择。 作为一种成熟的电脑…
阅读更多...
MySql查询系统时间，SQLServer查询系统时间，Oracle查询系统时间

MySql查询系统时间，SQLServer查询系统时间，Oracle查询系统时间

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 MySQL查询系统时间 第一种方法&#xff1a;select current_date&#xff1b; MySQL> select current_date as Systemtime; 第二…
阅读更多...
flask同源策略解决办法及flask-cors只允许特定域名跨域

flask同源策略解决办法及flask-cors只允许特定域名跨域

falsk 同源策略解决办法&#xff1a; 使用 flask-cors 包 并且 在代码里 加响应的一行代码解决。 from flask import Flask, session from flask_cors import CORSapp Flask(__name__) CORS(app, resources{r"/*": {"origins": "*"}}) # 允许…
阅读更多...
基本变量和引用变量

基本变量和引用变量

基本数据类型作比较&#xff0c;值相等则相等&#xff0c;值不相等则不相等&#xff08;忽略数据类型&#xff09; 引用类型作比较&#xff0c;引用地址相等则相等&#xff0c;否则都是不等的。 基本数据类型&#xff0c;和引用数据类型作比较&#xff0c;是比较值是否相等&…
阅读更多...
真格量化-持仓量第n档卖方主力跟随策略

真格量化-持仓量第n档卖方主力跟随策略

#!/usr/bin/env python # coding:utf-8 from PoboAPI import * import datetime import time import numpy as np import pandas as pd #日线级别 #开始时间，用于初始化一些参数 def OnStart(context):print("I\m starting...")#设定一个全局变量品种,本策略交易50E…
阅读更多...
最新文章

Copyright @ 2022~2023