什么是扁平化捆绑，为什么 Rollup 在这方面比 Webpack 更好？答案

【问题标题】：What is flat bundling and why is Rollup better at this than Webpack?什么是扁平化捆绑，为什么 Rollup 在这方面比 Webpack 更好？
【发布时间】：2017-08-30 08:24:21
【问题描述】：

我最近一直在研究 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 与 Webpack 的比较问题。对于对此感兴趣的人，有一个comparison chart for that by Webpack。这主要是问什么是扁平化捆绑？ Rollup 可能在内部做些什么来实现这一点？

【问题讨论】：

标签： reactjs webpack bundler rollupjs

【解决方案1】：

编辑：Rollup 支持代码拆分 - read article

编辑：Webpack 现在在某些情况下支持范围提升 — read the blog post here

我们可能对这些东西都有不同的定义，但我认为扁平化捆绑只是意味着“将你的模块变成一个单一的捆绑包”——即“扁平化”是多余的。 React 16 的最大区别在于默认情况下您将使用预制包，而不是您的应用负责捆绑 React 的源模块（尽管总是有一个 prebuilt UMD bundle of React available，使用 Browserify 构建）。

相反，两者之间的最大区别在于在模块边界处发生的情况。 webpack 的工作方式是将每个模块包装在一个函数中，并创建一个实现加载器和模块缓存的包。在运行时，依次评估每个模块函数以填充模块缓存。这种架构有很多优势——它可以实现代码拆分和按需加载以及热模块替换 (HMR) 等高级功能。

Rollup 采用了不同的方法——它将所有代码置于同一级别（根据需要重写标识符以避免变量名称之间的冲突等）。这通常被称为“范围提升”。因此，没有每个模块的开销，也没有每个捆绑的开销。你的 bundle 保证会更小，并且评估速度也会更快，因为间接性更少（更多信息 - The cost of small modules）。权衡是这种行为依赖于 ES2015 模块语义，这意味着 webpack 的一些高级特性更难实现（例如，Rollup 不支持代码拆分，至少现在还不支持！）。

简而言之，webpack一般更适合应用，而 Rollup一般更适合库。

我整理了一个small gist illustrating the differences。您也可以通过tinkering with the Rollup REPL 感受一下 Rollup 的输出。

【讨论】：

难以置信的答案。非常感谢 :) 让它更清晰！
看起来你写了一个really awesome medium post also about Rollup and Webpack。我想我会大声说出来:)
这个答案可能需要更新到 webpack 3，它引入了范围提升。 medium.com/webpack/webpack-3-official-release-15fd2dd8f07b
还要补充一点，webpack 3 documentation for ModuleConcatenationPlugin 讲得很好。
您可以将 rollup 与 gulp4 与 gulp-better-rollup 结合使用，并且几乎可以用 rollup 做任何您可能需要的事情，在您可能需要的地方使用 gulp。您可以通过 babel 和 gulpfile.babel.js 文件而不是 gulpfile.js 文件在 es6 中编写 gulp 文件。这意味着您可以将构建拆分为单独的部分并很好地清理它们。对于所有应用程序和库，我基本上已完全迁移到此设置。