webpack Tree-shaking的總結

1. Tree-shaking只對ES Module起作用，對於commonjs無效，對於umd亦無效

因為tree-shaking是針對靜態結構進行分析，只有import和export是靜態的導入和導出。而commonjs有動態導入和導出的功能，無法進行靜態分析。

如下代碼，只有運行代碼的時候才能知道導入的內容；

//運行時才知道的導入內容
var my_lib;
if (Math.random()) {
    my_lib = require('foo');
} else {
    my_lib = require('bar');
}

//運行時才知道的導出的內容
if (Math.random()) {
    exports.baz = function baz(){};
}

2. babel編譯默認將模塊轉換為commonjs，需要配置.babelrc的{module:false} 和 package.json的{sideEffects: false}才可以進行tree-shaking
3. rollup的tree-shaking比webpack的要強一些
4. webpack4默認開啟tree-shaking，具體可參考 webpack4的tree-shaking