我最近一直在研究rollup，看看它与Webpack和其他捆绑包的区别。我遇到的一件事是它对图书馆更好，因为＆＃34;扁平捆绑＆＃34;。这基于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可能会在内部做些什么来实现这个目标？
答案 0 :(得分：102)
修改：汇总支持代码拆分 - 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的输出。