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