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首先會分析文件項目裏具體哪些代碼被引入了，哪些沒有引入，而後將真正引入的代碼打包進去，最後沒有使用到的代碼天然就不會存在了。