reactjs - 什么是扁平 bundle ？为什么 Rollup 在这方面比 Webpack 更好？

Question

我最近一直在调查rollup并了解它与 Webpack 和其他 bundler 有何不同。我发现的一件事是，由于“扁平 bundle ”，这对图书馆来说更好。这是基于tweet和来自 a recent PR for React to utilize Rollup .

In my experience, Rollup is better at building libraries due to better optimizations around flat bundling (e.g. hoisting). 1/2

Webpack 2 may be better for you if you're bundling apps with code-splitting etc though. 2/2

不过，我并不完全确定我理解这意味着什么。扁平化 bundle 指的是什么？我知道 Rollup 的文档提到 treeshaking帮助减少 bundle 大小，但是 Webpack also has a way of doing this 。也许我只是不完全理解这个概念。

请注意，这不是关于 Rollup 与 Webpack 的比较问题。对于对此感兴趣的人，有一个 comparison chart for that by Webpack 。这主要是问什么是扁平化 bundle ？ Rollup 内部可能会做什么来实现这一目标？

Answer 1

编辑:Rollup 支持代码分割 - read article

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

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

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

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

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

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