帶你深度理解到底什麼是Tree-sharking（一）

開篇導讀

本文將帶你從宏觀的角度，來看看Tree-sharking究竟是個什麼東東，他很神祕嗎？不，讓咱們一塊兒揭露他的面目吧

一.什麼是Tree-sharking

咱們先從字面意思來進行翻譯看看：Tree是樹，sharking是搖晃的意思。那麼樹搖晃的時候，確定會'搖'下來一些無用的葉子。從編程的角度思考，若是假設咱們的代碼是一棵樹（Tree），那麼搖下來的無用的的葉子是什麼呢？固然是無用的代碼啦，他有個專業的術語，叫作dead-code（死碼）

二.技術的起源

想要了解一個技術，去看看他是如何發展的仍是頗有必要的啦，咱們來看看都有哪些東西有Tree-sharking， 這裏借用一下大佬的圖Tree-Shaking性能優化實踐 - 原理篇

那咱們來分別看看這三個東西是什麼

• rollup：能夠膚淺的理解爲他也是一種打包工具，不過相比較webpack來講，他打包出來的語法更清晰，更適合去打包一些工具庫，像咱們熟知的react和vue都是使用的rollup去進行打包
• webpack：這個你們應該都知道是什麼，更適合去打包大型應用
• google closure compiler：google爲開發人員提供的JS壓縮工具，最先去作了類型Tree-sharking的事情

三.爲何能夠進行Tree-sharking

衆所周知，Js是一個動態類型語言，也就是咱們經常說的弱類型語言，這使得依賴分析變得很是困難

其實Tree-sharking利用了ES Module的其中一個特性，術語叫：Static module structure

字面意思是靜態模塊結構，那麼以前是什麼呢？

咱們以前使用的模塊管理工具，是require（''），這種模塊的依賴關係是動態的。所謂動態的，就是說只有在代碼運行的時候，咱們才知道他require了一個什麼模塊。而ES Module的特性：靜態分析，使得Tree-sharking變得可能，這就是爲何webpack官方有這麼一段說明：

四.ES Module的靜態結構

上面說了Tree-sharking是藉助了ES Module的靜態模塊結構，如今咱們來看看他是個什麼玩意兒，想去看英文的朋友去這裏16.8.2 Static module structure，懶得看英文的繼續跟着我就好啦

4.1動態結構

開篇第一句有這樣一句話：

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()這個變量去引入不一樣的模塊。那麼咱們假設代碼當中有不少這樣的語法，那麼這時候讓你去分析模塊的依賴關係，你會怎麼辦？只能一我的頭疼了

4.2靜態結構

這時候貼出百度外賣大前端的一張圖（偷懶）

看了上面的動態結構缺陷，你們應該理解大佬這個圖下面的意思了：依賴關係是肯定的，和運行時狀態無關，能夠進行可靠的靜態分析，而後進行消除

4.3靜態結構的優勢

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就好啦

五.Tree-sharking發生在什麼時期

他發生在webpack將chunk打包成bundle的階段

什麼是chunk，什麼又是bundle，不用急，十秒鐘讓你秒懂

chunk在英文中最初的意思咱們能夠理解爲厚實的肉塊，就是塊，在計算機中也就是咱們常說的模塊

bundle在英文中是什麼意思呢，是捆綁

那麼把chunk打包成bundle，不就是把一個一個的塊（chunk），捆綁（bundle）在一塊兒嗎？沒錯，確實是這樣

咱們在把一個一個塊打包在一塊兒的過程當中，須要把無用的代碼清除掉，來達到優化打包文件大小的目的。這就是咱們的Tree-sharking做用

---

好啦，到這裏咱們已經對Tree-sharking有一個宏觀的認識啦，後續會對Tree-sharking做進一步深度的解讀，但願你們看的開心的點個贊支持一下啦。（有錯誤歡迎指正）