webpack tree shaking

树摇——性能优化

性能优化的关键步骤，已在 webpack4.0 里默认支持

概念

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

使用

webpack 默认⽀支持，在 .babelrc ⾥里里设置 modules: false 即可

mode：production 的情况下默认开启

在这种情况下，用到的代码就会被打包，没用到的就不会打包到输出。

要求:必须是 ES6 的语法，CJS 的⽅方式不不⽀支持

DCE (Dead code elimination)

• 代码不不会被执⾏行行，不不可到达

• 代码执⾏行行的结果不不会被⽤用到

• 代码只会影响死变量量(只写不不读)

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

Tree-shaking 原理

利用 ES6 模块的特点:

- 只能作为模块顶层的语句句出现
- import 的模块名只能是字符串串常量量
- import binding 是 immutable的

代码擦除: uglify 阶段删除⽆无⽤用代码