tree shaking简单分析

文章梗概

1. 什么是tree shaking

2. 为何须要tree shaking

3. tree shaking原理

什么是tree shaking

tree shaking首先是由rollup的做者提出的，它是DCE（dead code elimination）的一个实现，经过tree shaking的分析，可使你代码里没有使用的代码所有删除。然而它又区别于普通的dec，这里做者有一个比喻很形象

imagine that you made cakes by throwing whole eggs into the mixing bowl and smashing them up, instead of cracking them open and pouring the contents out. Once the cake comes out of the oven, you remove the fragments of eggshell, except that’s quite tricky so most of the eggshell gets left in there.

简单翻译一下就是，若是将dec比做制做蛋糕，传统的dec作法就是，将整个鸡蛋丢进碗里搅拌，而后放进烤箱，烤完以后从作好的蛋糕里，找到不须要的蛋壳扔掉，而tree shaking是将鸡蛋打破把蛋黄等有用的东西丢进碗里搅拌，最后直接作出蛋糕。

为何须要tree shaking

主要仍是为了减小页面的加载时间，将无用的代码删除，减小js包的大小，从而减小用户等待的时间，使用户不由于漫长的等待而离开。
那为何已经有了dec，还要作tree shaking呢，根据做者的意思是，因为js静态语法分析的局限性，从已有代码里去删除代码不如去寻找真正使用的代码来的好。

tree shaking实现的原理

其实关于tree shaking的实现原理上文多少都有提到，用一句话解释就是，找到你整个代码里真正使用的代码，打包进去，那么没用的代码天然就剔除了。
然而事情并不是说的那么简单，咱们如何知道哪些代码有用，哪些代码没用呢？其实tree shaking得以实现，是依赖es6的module模块的。是es6的模块特性，奠基了tree shaking的实现基础。
关于es6 module的特性，大概有以下几点：

1. 必须写在最外层，不能写在函数里

2. import的语句具备和var同样的提高(hoist)特性。

具体还有哪些特性能够查一下文档。

tree shaking首先会分析文件项目里具体哪些代码被引入了，哪些没有引入，而后将真正引入的代码打包进去，最后没有使用到的代码天然就不会存在了。