前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Tree-shaking VS dead code elimination 【翻译】

Tree-shaking VS dead code elimination 【翻译】

作者头像
2014v
发布2019-11-20 11:32:51
8950
发布2019-11-20 11:32:51
举报
文章被收录于专栏:2014前端笔记2014前端笔记

这里是原文链接Tree-shaking versus dead code elimination

我一直致力于一个叫rollup的工具,它可以将js各个模块打包在一起。其中他有一个特性叫tree-shaking,他会只将你程序需要的js代码打包进去。 有人问我这个概念从哪里得来的? 然后另一个人就说他只是“消除死代码”换了一个名字 又有一个人说这个tree shaking很愚蠢 但是实际上他们是不同的东西,即使他们在做一件相同的事--减少代码

## Dead code elimination is silly

我们来做一个不是很恰当的类比:想象一下你在制作蛋糕的过程中将一整个鸡蛋放进碗里,并且正在捣碎它,而不是我们正常的那种将鸡蛋打开,然后将鸡蛋清之类的倒进去搅拌(类似于鸡蛋汤的操作)。当我们把蛋糕拿出锅的时候,再清理一下鸡蛋壳,这个工作除了十分复杂以外,大部分鸡蛋壳还会遗留在那。

这样,你可能只能吃很少的蛋糕了。

先完成整个项目,然后剔除掉你不要的代码,这就是Dead code elimination。tree-shaking,则是完全相反的一方面,告诉我我要做什么蛋糕,混合的时候需要什么原料。

相比较dead code, 我们推荐live code。从结果来说可能是相同的,但是因为在js中静态分析的限制,就不一样了。live code能获取到更好的结果,而且从表面上看,live code用来解决清楚无用代码的方式更符合逻辑。

一旦发生,rollup并不是最好的。更多的介绍在下面。所以最好的方式是两个都用,rollup打包之后用UglifyJS or Webpack 2 with the Uglify plugin

## Yeah, it’s probably not a great name

首先,他暗示你你确实抖掉了dead branches。但是它被更多的人使用后描述成为从“你所需要的地方开始,向外延伸”, 我在思考一直使用“live code inclusion”这个短语来形容rollup,但是似乎也因此带来了更多的困惑,当我看到tree-shaking这个概念,难道这是一个错误的决定?

## Limits of Rollup’s tree-shaking

Rollup现在根据顶层的ASTnode节点来打包,而不是零碎的层级,所以他包含的代码可能比他需要的更多。 他现在也不能从对象中移除一些没有用到的方法,有时候当我们不得不假设最坏的情况来确保我们的程序正确运行。因为静态词法分析在js这样的动态语言中比较困难。我们将在以后去寻找一些解决办法。

## Rollup is about more than tree-shaking

rollup的目标是生产一个最高效的打包工具,看起来就像是我们写的一样。tree-shaking就是他的一部分,但是rollup还做了别的事情,他不会把函数包裹在一个模块里,他不会将模块加载放在bundle文件的开始,他不会从中间的ast中生成结果代码,但是他会尽可能的保存你的原始代码,因为这是一个很好的机会,即使它不用es6

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档