モジュールバンドラーとは？import グラフを解決する

モジュールバンドラーは、ファイルと依存関係の間の import の網を解決し、それからブラウザが読み込める結合された出力を出力します。

JavaScript にはいくつかのモジュールシステムがあり、ブラウザは歴史的にモジュールの深いツリーを効率的に読み込めませんでした。モジュールバンドラーは、それらすべての import を build 時に解決し、ブラウザが実行できる出力を生成します。bundler と module bundler はしばしば互換的に使われますが、ここでの重点は、異なるモジュール形式をどう理解し調整するかにあります。

調整するモジュール形式

静的な import と export を持つ ES module。
require と module.exports を持つ CommonJS。
UMD やその他のレガシー相互運用形式。

グラフを解決する

バンドラーはエントリーポイントで始まり、すべての import を辿り、拡張子、パッケージのエントリーフィールド、エイリアスのルールを使って各 specifier をファイルに解決します。結果は、含めるべきモジュールの完全なグラフです。

なぜモジュール形式が重要か

静的な ES module は、バンドラーが tree shaking を行い、より小さな出力を生成できるようにします。動的な CommonJS は解析が難しいため、形式を混在させると最適化が制限されることがあります。多くの build 問題は、依存関係が誤った形式を出荷していることに起因します。

ネイティブモジュール対バンドリング

ブラウザは今や ES module を直接読み込むことができ、dev server は速い起動のためにそれを使います。しかし本番環境は、リクエストを減らし最適化を適用するためにバンドリングから依然として恩恵を受けるため、バンドラーは build の中心にとどまります。

CI/CD でのモジュールバンドリング

モジュール解決は正確な依存関係ツリーに依存するため、コミットされた lockfile は CI が毎回同じモジュールを解決するよう保ちます。解決されたグラフと依存関係のインストールをキャッシュすると再 build が速くなります。それがなければ、cold な runner はすべてをゼロから再解決します。

重要なポイント

モジュールバンドラーは、ES module と CommonJS にまたがる import グラフを解決します。
静的な ES module は、動的な形式が制限する最適化を可能にします。
コミットされた lockfile は、CI のモジュール解決を再現可能に保ちます。