フラットバンドルとは何ですか？また、なぜWebpackよりもRollupの方が優れているのですか？
最近、 rollup を調べて、Webpackや他のバンドラーとの違いを確認しました。私が出くわしたことの1つは、「フラットバンドル」のためにライブラリに適していることです。これは Tweet とfrom React Rollupを利用するための最近のPR に基づいています。
私の経験では、Rollupは、フラットバンドリング（ホイストなど）に関する最適化が優れているため、ライブラリの構築に優れています。 1/2
ただし、コード分割などを使用してアプリをバンドルしている場合は、Webpack 2の方が適している場合があります。 2/2
しかし、それが何を意味するのか理解しているのかどうかは完全にはわかりません。フラットバンドリングとは何を指しますか？ Rollupのドキュメントで treeshaking がバンドルサイズの削減に役立つことを知っていますが、 Webpackにもこれを行う方法があります です。おそらく、この概念を完全に理解していないだけかもしれません。
これは、RollupとWebpackに関する比較の質問ではないことに注意してください。それに興味がある人のために、 Webpackによる比較チャート があります。これは主に、フラットバンドリングとは何ですか？そして、潜在的にこれを達成するためにロールアップは内部的に何をしますか？
編集：ロールアップはコード分割をサポートします- 記事を読む
編集：Webpackが状況によってはスコープの巻き上げをサポートするようになりました— ブログの投稿はこちら
私たちはおそらくこのようなものに対して異なる定義を持っているでしょうが、フラットバンドルとは単に「モジュールを取り、それらを単一のバンドルに変える」ことを意味すると思います-つまり、「フラット」は冗長です。 React 16の大きな違いは、アプリがReactのソースモジュールをバンドルする責任を負うのではなく、デフォルトで既製のバンドルを使用することです（ただし、常に prebuilt UMDバンドルReact使用可能 、Browserifyでビルド）。
むしろ、この2つの大きな違いは、モジュールの境界で何が起こるかです。 webpackが機能する方法は、各モジュールを関数でラップし、ローダーとモジュールキャッシュを実装するバンドルを作成することです。実行時に、これらの各モジュール関数が順番に評価されて、モジュールキャッシュに入力されます。このアーキテクチャには多くの利点があります。コード分割やオンデマンドロード、ホットモジュール交換（HMR）などの高度な機能を実装できます。
ロールアップは異なるアプローチを取ります。すべてのコードを同じレベルに配置します（変数名などの競合を避けるために必要に応じて識別子を書き換えます）。これはしばしば「scope hoisting」と呼ばれます。そのため、モジュールごとのオーバーヘッドはなく、バンドルごとのオーバーヘッドもありません。バンドルのサイズは小さくなることが保証されており、間接性が少ないため、より高速に評価されます（これに関する詳細情報— 小型モジュールのコスト ）。トレードオフは、この動作がES2015モジュールのセマンティクスに依存していることであり、Webpackの高度な機能の一部は実装がはるかに難しいことを意味します（たとえば、少なくともまだロールアップはコード分割をサポートしていません！）。
要するに、webpackは一般的にアプリに適し、Rollupは一般にライブラリに適しています。
違いを示す小さな要点 をまとめました。 Rollup REPLをいじくり回す を使用して、Rollupの出力を感じることもできます。