webpack tree shaking （摇树优化）

摇树优化

一个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打包到bundle中去，tree shaking 就是只把用到的的方法打入 bundle，没用到的方法会在 uglify 阶段被擦除掉。

• 代码不会被执行，不可到达
• 代码执行的结果不会被用到
• 代码只会影响死变量（只写不读）

if(false) {
  console.log('这段代码永远不会执行')
}

使用

webpack4 默认支持，在 .babelrc 里面设置 modules: false 即可
production mode 的情况下默认开启

要求

必须是ES6语法，CJS的方式不支持

原理

利用ES6模块的特点：

• 只能作为模块顶层的语句出现；
• import 的模块名只能是字符串常量
• import 的常量是不可变的

uglify 阶段删除无用代码