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 阶段删除?无?用代码

webpack tree shaking

上一篇:web前端(html-js)


下一篇:h5 websocket 断开重新连接