什么是平面捆绑,为什么Rollup在这方面比Webpack更好?


70

最近,我一直在研究汇总,并发现它与Webpack和其他捆绑软件有何不同。我遇到的一件事是,由于“扁平捆绑”,对图书馆来说更好。这是基于一条推文最近的React的PR来利用Rollup的PR

以我的经验,由于对平面捆绑(例如吊装)进行了更好的优化,因此Rollup在构建库方面更好。1/2

如果您将应用程序与代码拆分等捆绑在一起,Webpack 2可能对您更好。2/2

我不完全确定我理解那是什么意思。平面捆绑指的是什么?我知道Rollup的文档中提到了树状摇晃以帮助减小捆绑包的大小,但是Webpack也有这样做的方法。也许我只是不完全理解这个概念。

请注意,这不是关于汇总与Webpack的比较问题。对于对此感兴趣的人,Webpack提供了一个比较表。这主要是在问什么是平面捆绑?汇总可能会在内部做些什么来实现这一目标?

Answers:


122

编辑:汇总支持代码拆分-阅读文章

编辑:Webpack现在在某些情况下支持范围提升-在此处阅读博客文章

对于这些东西,我们可能都有不同的定义,但是我认为固定捆绑仅意味着“将您的模块放入一个单独的捆绑中”,即“固定”是多余的。React 16的最大区别在于,默认情况下,您将使用预制的包,而不是由您的应用程序负责捆绑React的源模块(尽管始终有可用预制UMD React捆绑包,它是使用Browserify构建的)。

相反,两者之间的最大区别是在模块边界发生什么。webpack的工作方式是将每个模块包装在一个函数中,并创建一个实现加载程序和模块缓存的捆绑包。在运行时,依次评估每个模块功能,以填充模块缓存。这种体系结构具有很多优点-它使实现高级功能成为可能,例如代码拆分和按需加载以及热模块替换(HMR)。

汇总采用了不同的方法-将所有代码置于同一级别(必要时重写标识符,以避免变量名之间发生冲突等)。这通常称为“范围提升”。因此,没有每个模块的开销,也没有每个捆绑的开销。您的包保证会更小,并且因为间接调用的次数更少(有关更多信息—小型模块的成本),评估也将更快。需要权衡的是,此行为依赖于ES2015模块的语义,这意味着webpack的某些高级功能很难实现(例如,Rollup不支持代码拆分,至少现在还不支持!)。

简而言之,Webpack通常更适合应用程序,而Rollup通常更适合库。

我整理了一个小要点来说明差异。您也可以通过修改Rollup REPL来了解Rollup的输出。


2
难以置信的答案。非常感谢:)使它更加清晰!
八月

3
看来您写了一篇有关Rollup和Webpack的真棒中级文章。我想我给它一个喊出来:)
八月

2
该答案可能需要对webpack 3进行更新,其中已经引入了示波器吊装。medium.com/webpack/webpack-3-official-release-15fd2dd8f07b
cynx

2
还要添加有关ModuleConcatenationPlugin的webpack 3文档,对此进行了很好的论述。
八月

您可以将gulp4的汇总与gulp-better-rollup结合使用,并且可以在需要的地方使用gulp几乎完成任何可能需要的汇总。您可以通过babel和gulpfile.babel.js文件而不是gulpfile.js文件在es6中编写gulp文件。这意味着您可以将构建分解为多个部分,并进行很好的清理。我基本上已经完全迁移到所有应用程序和库的此设置。
瑞安·曼
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.