tree-shaking

发表于 | 分类于 | |

起源于 rollup, 目前webpack也可以使用
tree-shaking用来删除无用的代码

原理

ES6的模块引入是静态分析的，故而可以在编译时正确判断到底加载了什么代码。
分析程序流，判断哪些变量未被使用、引用，进而删除此代码。

存在问题

  • 虽然生产模式下默认开启，但是由于经过 babel 编译全部模块被封装成 IIFE(立即执行函数) 。IIFE 存在副作用无法被 tree-shaking 掉
  • 需要配置 { module: false }(告诉babel不要编译模块代码，保留export/import语法)和 sideEffects: false
  • rollup 和 webpack 的 shaking 程度不同，以一个 Class 为例子

参考

https://www.webpackjs.com/guides/tree-shaking/
https://zhuanlan.zhihu.com/p/32831172
https://juejin.im/post/6844903544756109319