我最近一直在研究 rollup，看看它与 Webpack 和其他打包器有何不同。我遇到的一件事是，由于“扁平 bundle ”，它对图书馆更好。这是基于 tweet 和来自 a recent PR for React to utilize Rollup 。
我不完全确定我明白这意味着什么。扁平化 bundle 指的是什么？我知道 Rollup 的文档提到 treeshaking 来帮助减少包大小，但 Webpack also has a way of doing this 。也许我只是不完全理解这个概念。
请注意，这不是关于 Rollup 与 Webpack 的比较问题。对于对此感兴趣的人，有一个 comparison chart for that by Webpack 。这主要是问什么是扁平 bundle ？ Rollup 可能在内部做了什么来实现这一目标？
最佳答案
编辑:汇总支持代码拆分 - read article
编辑:Webpack 现在在某些情况下支持范围提升 — read the blog post here
我们可能对这些东西都有不同的定义，但我认为扁平化 bundle 只是意味着“将你的模块变成一个单一的 bundle ”——也就是说，“扁平化”是多余的。 React 16 的最大区别在于默认情况下您将使用预制包，而不是您的应用程序负责 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 的输出。
关于reactjs - 什么是扁平 bundle ，为什么 Rollup 在这方面比 Webpack 更好？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43219030/