モジュールフェデレーション#

モジュールフェデレーションは、JavaScriptアプリケーションを分割するためのアーキテクチャパターン（サーバーサイドのマイクロサービスに似ています）であり、複数のJavaScriptアプリケーション（またはマイクロフロントエンド）間でコードとリソースを共有できます。

Rspackチームは、モジュールフェデレーション開発チームと緊密に連携し、モジュールフェデレーションを第一級でサポートしています。

ユースケース#

モジュールフェデレーションには、次のような典型的なユースケースがいくつかあります。

• 独立したアプリケーション（マイクロフロントエンドアーキテクチャでは「マイクロフロントエンド」と呼ばれます）が、アプリケーション全体を再コンパイルすることなくモジュールを共有できるようにします。
• 異なるチームが同じアプリケーションの異なる部分を、アプリケーション全体を再コンパイルすることなく作業できるようにします。
• 実行時にアプリケーション間でコードを動的にロードおよび共有します。

モジュールフェデレーションは、以下のことに役立ちます。

• コードの重複を削減する
• コードの保守性を向上させる
• アプリケーションの全体サイズを削減する
• アプリケーションのパフォーマンスを向上させる

使用方法#

モジュールフェデレーション（MF）には現在、複数のメジャーバージョンがあり、ニーズに基づいて選択できます。

以下は、いくつかのバージョンの特徴です。

モジュールフェデレーション v2.0#

モジュールフェデレーション 2.0 は、モジュールフェデレーションに基づいて、動的な TS タイプヒント、Chrome devtools、ランタイムプラグイン、プリロードなど、いくつかの追加のすぐに使える機能を提供し、モジュールフェデレーションを大規模な Web アプリケーションをサポートするマイクロフロントエンドアーキテクチャにより適したものにしています。モジュールフェデレーション v2.0 は v1.5 をベースに実装されています。

モジュールフェデレーション v2.0 を使用するには、追加の `@module-federation/enhanced` プラグインをインストールする必要があります。

const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/rspack');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // options
    }),
  ],
};

具体的な使用方法の詳細は、モジュールフェデレーション v2.0 公式ドキュメント を参照してください。

モジュールフェデレーション v1.5#

これは Rspack に組み込まれているバージョンです。モジュールフェデレーション v1.0 のモジュールエクスポート、モジュールロード、依存関係共有などの機能をサポートすることに加えて、ランタイムプラグイン機能も追加され、ユーザーはモジュールフェデレーションの動作と機能を拡張できます。

追加のプラグインをインストールすることなく、Rspack の ModuleFederationPlugin を介して使用できます。

const rspack = require('@rspack/core');

module.exports = {
  output: {
    // set uniqueName explicitly to make HMR works
    uniqueName: 'app',
  },
  plugins: [
    new rspack.container.ModuleFederationPlugin({
      // options
    }),
  ],
};

参考: モジュールフェデレーション v1.5 の例。

モジュールフェデレーション v1.0#

このバージョンは、webpack.container.ModuleFederationPlugin との互換性のために実装されています。

Rspack の ModuleFederationPluginV1 を介して使用できます。