树摇——性能优化

性能优化的关键步骤，已在 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 阶段删除?无?用代码

webpack tree shaking

原文：https://www.cnblogs.com/ssaylo/p/13677146.html