Tree-shaking

一. 什麼是Tree-shaking

通過工具"搖"我們的JS檔案，將其中用不到的程式碼"搖"掉，是一個性能優化的範疇
具體來說，在 webpack 專案中，有一個入口檔案，相當於一棵樹的主幹，入口檔案有很多依賴的模組，相當於樹枝。實際情況中，雖然依賴了某個模組，但其實只使用其中的某些功能。通過 tree-shaking，將沒有使用的模組搖掉，這樣來達到刪除無用程式碼的目的

二. tree-shaking的原理

Tree-shaking的本質是消除無用的js程式碼。無用程式碼消除在廣泛存在於傳統的程式語言編譯器中，編譯器可以判斷出某些程式碼根本不影響輸出，然後消除這些程式碼，這個稱之為DCE（dead code elimination）。

Tree-shaking 是 DCE 的一種新的實現，Javascript同傳統的程式語言不同的是，javascript絕大多數情況需要通過網路進行載入，然後執行，載入的檔案大小越小，整體執行時間更短，所以去除無用程式碼以減少檔案體積，對javascript來說更有意義。

Tree-shaking 和傳統的 DCE的方法又不太一樣，傳統的DCE 消滅不可能執行的程式碼，而Tree-shaking 更關注宇消除沒有用到的程式碼。下面詳細介紹一下DCE和Tree-shaking。

• （1）先來看一下DCE消除大法

Like this one

編譯器將Dead Code從AST（抽象語法樹）中刪除，那javascript中是由誰做DCE呢？

不是上面提到的三個工具，rollup，webpack，cc做的, 著名的程式碼壓縮優化工具uglify，uglify完成了javascript的DCE,送到瀏覽器之前的步驟進行優化

rollup將無用的程式碼foo函式和unused函式消除了，但是仍然保留了不會執行到的程式碼，而webpack完整的保留了所有的無用程式碼和不會執行到的程式碼

右側最終打包結果中都去除了無法執行到的程式碼，結果符合我們的預期

• (2) 再來看一下Tree-shaking消除大法

更關注於無用模組的消除，消除那些引用了但並沒有被使用的模組

為什麼tree-shaking是最近幾年流行起來了？而前端模組化概念已經有很多年曆史了，其實tree-shaking的消除原理是依賴於ES6的模組特性

import config from '../../../config'

require '../../../config'

所謂靜態分析就是不執行程式碼，從字面量上對程式碼進行分析，ES6之前的模組化，比如我們可以動態require一個模組，只有執行後才知道引用的什麼模組，這個就不能通過靜態分析去做優化。

這是 ES6 modules 在設計時的一個重要考量，也是為什麼沒有直接採用 CommonJS，正是基於這個基礎上，才使得 tree-shaking 成為可能，這也是為什麼 rollup 和 webpack 2 都要用 ES6 module syntax 才能 tree-shaking

面向過程程式設計函式和麵向物件程式設計是javascript最常用的程式設計模式和程式碼組織方式

• 函式消除實驗 - rollup和webpack都可以實現去除無用程式碼
• 類消除實驗 - rollup和webpack都不可以

總結

要求開發人員對程式碼的質量更高,更加嚴謹,不引用無用模組