本文将带你从宏观的角度,来看看Tree-sharking究竟是个什么东东,他很神秘吗?不,让咱们一块儿揭露他的面目吧前端
咱们先从字面意思来进行翻译看看:Tree是树,sharking是摇晃的意思。那么树摇晃的时候,确定会'摇'下来一些无用的叶子。从编程的角度思考,若是假设咱们的代码是一棵树(Tree),那么摇下来的无用的的叶子是什么呢?固然是无用的代码啦,他有个专业的术语,叫作dead-code(死码)vue
想要了解一个技术,去看看他是如何发展的仍是颇有必要的啦,咱们来看看都有哪些东西有Tree-sharking, 这里借用一下大佬的图Tree-Shaking性能优化实践 - 原理篇react
那咱们来分别看看这三个东西是什么webpack
众所周知,Js是一个动态类型语言,也就是咱们经常说的弱类型语言,这使得依赖分析变得很是困难web
其实Tree-sharking利用了ES Module的其中一个特性,术语叫:Static module structure编程
字面意思是静态模块结构,那么以前是什么呢?性能优化
咱们以前使用的模块管理工具,是require(''),这种模块的依赖关系是动态的。所谓动态的,就是说只有在代码运行的时候,咱们才知道他require了一个什么模块。而ES Module的特性:静态分析,使得Tree-sharking变得可能,这就是为何webpack官方有这么一段说明:markdown
上面说了Tree-sharking是借助了ES Module的静态模块结构,如今咱们来看看他是个什么玩意儿,想去看英文的朋友去这里16.8.2 Static module structure,懒得看英文的继续跟着我就好啦dom
开篇第一句有这样一句话:工具
Current JavaScript module formats have a dynamic structure: What is imported and exported can change at runtime
咱们来稍微翻译一下:现代的JavaScript模块是动态的:这意味着咱们能够在运行时改变imported和exported
这句话怎么理解呢,咱们来看看官方给的这个例子:
if (Math.random()) {
my_lib = require('foo');
} else {
my_lib = require('bar');
}
复制代码
能够看到上面的require是根据Math.random()这个变量去引入不一样的模块。那么咱们假设代码当中有不少这样的语法,那么这时候让你去分析模块的依赖关系,你会怎么办?只能一我的头疼了
这时候贴出百度外卖大前端的一张图(偷懒)
看了上面的动态结构缺陷,你们应该理解大佬这个图下面的意思了:依赖关系是肯定的,和运行时状态无关,能够进行可靠的静态分析,而后进行消除
ES官方给出了这样几个优势
dead code elimination during bundling
compact bundling, no custom bundle format
faster lookup of imports
variable checking
ready for macros
ready for types
supporting other languages
Source of this section
Source of this section
是否是有点多,哈哈不要紧,后面咱们写一篇文章来一一解密这些东西是什么,而且会在这个地方贴出连接,感兴趣的朋友能够去看,如今咱们只须要知道为何静态分析才能够去进行Tree-sharking就好啦
他发生在webpack将chunk打包成bundle的阶段
什么是chunk,什么又是bundle,不用急,十秒钟让你秒懂
chunk在英文中最初的意思咱们能够理解为厚实的肉块,就是块,在计算机中也就是咱们常说的模块
bundle在英文中是什么意思呢,是捆绑
那么把chunk打包成bundle,不就是把一个一个的块(chunk),捆绑(bundle)在一块儿吗?没错,确实是这样
咱们在把一个一个块打包在一块儿的过程当中,须要把无用的代码清除掉,来达到优化打包文件大小的目的。这就是咱们的Tree-sharking做用
好啦,到这里咱们已经对Tree-sharking有一个宏观的认识啦,后续会对Tree-sharking做进一步深度的解读,但愿你们看的开心的点个赞支持一下啦。(有错误欢迎指正)