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