Tree-shaking VS dead code elimination 【翻译】

2019-11-20 11:32:51 浏览数 (1)

这里是原文链接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

0 人点赞