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都不可以
總結
要求開發人員對代碼的質量更高,更加嚴謹,不引用無用模塊