什么是扁平捆绑? 为什么 Rollup 在这方面比 Webpack 做得更好？

小开

最佳答案

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

编辑: Webpack 现在在某些情况下支持范围提升ーー请点击这里阅读博客文章

我们可能对这些东西有不同的定义，但是我认为扁平化捆绑仅仅意味着“把你的模块变成一个单一的捆绑包”ーー也就是说，扁平化是多余的。React 16最大的不同在于，默认情况下你会使用一个预制的捆绑包，而不是你的应用负责捆绑 React 的源模块(尽管总是有一个预建 UMD 捆绑反应可用，用 Browserify 构建)。

相反，两者之间的最大区别在于发生了什么 在模块边界。Webpack 的工作方式是将每个模块封装在一个函数中，并创建一个包来实现一个加载程序和一个模块缓存。在运行时，每个模块函数依次进行计算，以填充模块缓存。这种体系结构有很多优点ーー它可以实现高级特性，如代码分割和按需加载，以及热模块替换(HMR)。

汇总采取了一种不同的方法ーー它将所有代码放在同一级别(根据需要重写标识符，以避免变量名之间的冲突等)。这通常被称为“ 起重机吊装范围”。因此，没有每个模块的开销，也没有每个包的开销。您的捆绑包肯定会更小，并且计算速度也会更快，因为间接性(关于它的更多信息ー小模块的成本)更少。取舍之处在于这种行为依赖于 ES2015模块语义，这意味着 webpack 的一些高级特性更难实现(例如，Rollup 不支持代码分割，至少现在还不支持!).

简而言之，webpack 更适合于应用程序，而 Rollup 更适合于库。

我已经把一个说明差异的小要点放在一起。你也可以通过修补总结 REPL来感受一下汇总的输出。