フラットバンドルとは何か、なぜRollupはWebpackより優れているのか？

質問

私は最近 ロールアップ について調べ、Webpack や他のバンドルとどう違うかを見てきました。私が出会ったことの一つは、"フラットバンドル" のため、ライブラリに適しているということです。これは ツイート から、そして ロールアップを利用するためのReactの最近のPRである .

私の経験では、Rollupはフラットバンドル周りの最適化（hoistingなど）が優れているため、ライブラリのビルドに優れています。1/2

コード分割などでアプリをバンドルする場合は、Webpack 2の方が良いかもしれませんね。2/2

しかし、私はその意味を完全に理解しているわけではありません。フラット バンドルとは何を指しているのでしょうか？Rollup のドキュメントに記載されているのは トレースシェーキング を使えばバンドルサイズを小さくできることは知っていますが Webpackにもこれを行う方法があります . もしかしたら、私がこのコンセプトを完全に理解していないだけかもしれません。

これはRollupとWebpackに関する比較の質問ではないことに注意してください。それに興味がある人のために の比較表があります。 . これは主に、フラットバンドルとは何か？そして潜在的にRollupはこれを実現するために内部で何をやっているのか？

どのように解決するのですか？

編集: Rollup はコードの分割をサポートします。 記事を読む

編集: Webpack は、いくつかの状況でスコープのホイストをサポートするようになりました。 ブログ記事はこちら

フラットバンドルとは、単に「モジュールを1つのバンドルにする」という意味だと思いますが、つまり「フラット」は冗長です。React 16 での大きな違いは、React のソース モジュールをバンドルするのは自分のアプリの責任ではなく、デフォルトであらかじめ作られたバンドルを消費することです (ただし、常に プリビルドされた React の UMD バンドルが利用可能です。 はありましたが）。

むしろ、両者の大きな違いは、どうなるかというと モジュールの境界で . webpack の仕組みは、各モジュールを関数でラップし、ローダーとモジュールキャッシュを実装したバンドルを作成することです。実行時に、各モジュールの関数が順番に評価され、モジュールキャッシュが生成されます。このアーキテクチャには多くの利点があり、コード分割やオンデマンド読み込み、ホットモジュール置き換え (HMR) などの高度な機能の実装が可能になります。

ロールアップは異なるアプローチを取ります - すべてのコードを同じレベルに置きます (変数名などの衝突を避けるために、必要に応じて識別子を書き換えます)。これは、しばしば「」と呼ばれます。 スコープホイスト '. このため、モジュールごとのオーバーヘッドや、バンドルごとのオーバーヘッドがありません。バンドルはより小さくなることが保証されており、また、インダイレクトが少ないのでより速く評価されます (これについての詳細は 小さなモジュールのコスト ). トレードオフは、この動作が ES2015 モジュール セマンティクスに依存していることであり、webpack の高度な機能の一部が実装しにくくなることを意味します (例えば Rollup はコード分割をサポートしていません。少なくとも今のところは!)。