treeSharking

treeSharking
  • 起源于DCE(dead code elimination):
    传统编译器对代码的优化,移除不会执行、不可达的代码,移除未使用的变量

  • rollup.Tree-shaking和传统的压缩算法uglify
    rollup本身只移除没有使用到的变量、函数
    uglify会移除不会执行不可达到的代码, 比如:if(false){}、多个return

  • webpack.Tree-shaking
    tree-shaking的消除原理是依赖于ES6的模块特性:引用在代码顶层,静态引用
    glify目前不会跨文件去做DCE,所以上面这种情况,uglify是不能优化的
    而Tree-shaking、rollup都可以解决这点
    在一些特殊情况下webpack.Tree-shaking、rollup.Tree-shakin都无法将未使用的类去除


    image.png

原因在于: js本身是动态语言,并且sideEffect是广泛存在的

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

相关阅读更多精彩内容

  • 什么是tree-shaking以及Tree-shaking的前置依赖 关于什么是tree-shaking可以看这篇...
    光哥很霸气阅读 10,279评论 0 3
  • 一:AOT 与在浏览器中完成编译的JIT编译相反,AOT在构建过程中编译了很多代码(也称为脱机编译),从而减少了客...
    皮卡许阅读 4,675评论 0 0
  • 什么是Rollup rollup.js是Javascript的ES模块打包器,我们熟知的Vue、React等诸多知...
    majunchang阅读 10,210评论 0 1
  • ES6 module 静态结构 当前的JavaScript模块格式具有动态结构:导入和导出的内容可以在运行时(ru...
    梦想成真213阅读 5,104评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 12,204评论 16 22

友情链接更多精彩内容