Module Federation：動的ランタイムインポート

複数のチームが所属するフロントエンド組織では、独立してデプロイされる複数のアプリケーションで、UIコンポーネントやユーティリティを共有する必要が生じることがよくあります。npmに公開する場合、バージョンの更新、新しいリリース、利用するすべてのアプリケーションの完全な再デプロイが必要になるため、チーム間の結び付きが強くなり、開発サイクルも遅くなります。

従来の方式（共有コードをnpmパッケージとして公開する方式）では、共有ボタンコンポーネントを更新するだけでも、npmパッケージの更新、 new versionの公開、利用するすべてのアプリケーションのpackage.jsonの更新、そして利用するすべてのアプリケーションのビルドと再デプロイが必要です。Module Federationを使えば、これらの手順をすべて省略できます。

Module Federationを使うと、あるアプリケーション（「remote」）がJavaScriptモジュールを公開し、別のアプリケーション（「host」）がホストを再ビルドまたは再デプロイすることなく、実行時にそれらを読み込んで実行できます。ユーザーがhostアプリを読み込むと、必要に応じてremoteのモジュールが動的に取得されます。

Webpack 5では、ModuleFederationPluginを通じてModule Federationが標準搭載の主要機能として導入されました。Webpack 5より前は、同様のパターンを実現するために、複雑な手動設定やサードパーティ製プラグインが必要でした。このプラグインは、動的な読み込みと共有スコープの管理をすべて自動的に処理します。

remoteとは、Reactコンポーネント、ユーティリティ、機能ページ全体など、1つ以上のモジュールを公開し、他のアプリケーションから利用できるようにする独立デプロイ型のアプリケーションです。remoteは、公開する内容と読み込み方法を記述したremoteEntry.jsマニフェストをビルドします。

hostとは、1つ以上のremoteからモジュールを利用するアプリケーションです。hostは、Webpackの設定でremoteを名前とURLによって参照します。hostのコードがremoteモジュールをimportすると、WebpackのModule FederationランタイムがremoteのURLからそのモジュールを動的に取得して実行します。

共有モジュールとは、hostとremoteの両方に含まれていても1度だけ読み込むべきライブラリ（ReactやReact DOMなど）です。Reactを共有シングルトンとして指定すると、Module FederationはReactを1つのバージョンだけ実行するよう保証します。Reactのフックは複数のインスタンスがあると動作しないため、これは重要です。

remoteをビルドすると、Webpackは設定したfilenameにremoteEntry.jsファイルを生成します。このファイルは軽量なマニフェスト兼ブートストラップスクリプトであり、remoteが公開するモジュール、各モジュールのチャンクURL、共有スコープの初期化処理を記述します。hostはまずこのファイルをダウンロードして、remoteが提供する内容を確認します。

hostがremoteモジュールからのimportに遭遇すると、remoteのコードがすでに読み込まれているかを確認します。読み込まれていなければ、remoteのURLからremoteEntry.jsを取得し、共有スコープを初期化して共有ライブラリのバージョンを調整した後、要求されたモジュールを含む特定のチャンクをダウンロードして実行します。

あるチームが、hostアプリケーションに変更を加えることなく、新しいremote（更新されたButtonコンポーネント）をデプロイします。次にhostを読み込むユーザーは、hostが常に現在のremoteEntry.js URLから取得するため、新しいButtonを自動的に受け取ります。hostの再ビルドも再デプロイも、チーム間の調整も必要ありません。

以前からあるマイクロフロントエンドのパターンでは、チームが所有するセクションを分離するためにiframeを使用します。iframeは強力な分離を実現できますが、共有状態、URLルーティング、スタイルの共有が非常に難しくなります。Module Federationではすべてを同じJavaScriptコンテキスト内で動作させられるため、ルーティング、認証状態、スタイルを共有できます。

Module FederationにおけるremoteEntry.jsの役割は何ですか？

Module Federationは、実行時のモジュール読み込みを可能にすることで、共有フロントエンドコードの独立デプロイという問題を解決します。remoteはremoteEntry.jsを介してモジュールを公開し、hostは再ビルドせずにそれらを動的に利用します。共有シングルトン（React、React DOM）によって、ライブラリが重複して読み込まれるのを防ぎます。このアーキテクチャにより、真の独立デプロイが可能になります。remoteを更新すると、すべてのhostアプリケーションにその変更がすぐに反映されます。