webpack tree shaking (摇树优化)

摇树优化

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

  • 代码不会被执行,不可到达
  • 代码执行的结果不会被用到
  • 代码只会影响死变量(只写不读)
if(false) {
  console.log('这段代码永远不会执行')
}

使用

webpack4 默认支持,在 .babelrc 里面设置 modules: false 即可
production mode 的情况下默认开启

要求

必须是ES6语法,CJS的方式不支持

原理

利用ES6模块的特点:

  • 只能作为模块顶层的语句出现;
  • import 的模块名只能是字符串常量
  • import 的常量是不可变的

uglify 阶段删除无用代码

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容