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