什么是扁平捆绑，为什么Rollup比Webpack更好？

Question

我最近一直在调查rollup，看它与Webpack和其他打包商有什么不同。我遇到的一件事是，由于“扁平捆绑”，图书馆更好。这是基于tweet和a recent PR for React to utilize Rollup。

根据我的经验，Rollup在建设图书馆方面更好，因为围绕平面捆扎（例如提升）有更好的优化。 1/2

Webpack 2可能会更好，如果你捆绑应用程序与代码分裂等。 2/2

我不完全确定我明白这是什么意思。扁平捆绑是指什么？我知道Rollup的文档提到treeshaking以帮助减少包的大小，但Webpack also has a way of doing this。也许我完全不理解这个概念。

请注意，这不是一个关于Rollup vs Webpack的比较问题。对于那些感兴趣的人，有一个comparison chart for that by Webpack。这主要是问扁平捆绑是什么？ Rollup在内部可以做些什么来实现这一目标？

Answer 1

编辑：WebPACK现在可支持范围，某些情况下吊装 - read the blog post here

我们大概都对这个东西有不同的定义，但我认为平板捆绑仅仅意味着“把你的模块，使之成为一个单束' - 即，'扁平'是多余的。 React 16最大的区别在于你会默认使用预制的包，而不是你的应用负责捆绑React的源代码模块（尽管总是有一个由Browserify构建的prebuilt UMD bundle of React available）。

相反，两者之间的巨大差异是在模块边界处发生的。 webpack的工作方式是将每个模块封装在一个函数中，并创建一个实现加载器和模块缓存的bundle。在运行时，依次评估每个模块函数以填充模块高速缓存。该体系结构具有许多优点 - 可以实现代码分割和按需加载以及热模块替换（HMR）等高级功能。

汇总采用了不同的方法 - 它将您的所有代码放在同一级别（根据需要重写标识符以避免变量名称之间的冲突等）。这通常被称为'范围吊装'。正因为如此，没有每个模块的开销，也没有每个bundle的开销。你的包保证更小，并且也会更快地评估，因为间接性较差（更多信息，请参阅 - The cost of small modules）。这种折衷是这种行为依赖于ES2015模块语义，这意味着一些webpack的高级功能实现起来要困难得多（例如Rollup不支持代码分割，至少现在还不支持！）。

总之，是的WebPack通常为应用更好的贴合，并汇总为通常图书馆的更好配合。

我已经放在一起small gist illustrating the differences。您还可以通过tinkering with the Rollup REPL感受Rollup的输出。