模組聯邦#

模組聯邦是一種用於 JavaScript 應用程式分解的架構模式（類似於伺服器端的微服務），允許您在多個 JavaScript 應用程式（或微前端）之間共享程式碼和資源。

Rspack 團隊與模組聯邦開發團隊密切合作，並為模組聯邦提供一流的支援。

使用案例#

模組聯邦有幾個典型的使用案例，包括：

• 允許獨立的應用程式（在微前端架構中稱為「微前端」）共享模組，而無需重新編譯整個應用程式。
• 不同的團隊在同一個應用程式的不同部分工作，而無需重新編譯整個應用程式。
• 在執行期間，應用程式之間進行動態程式碼載入和共享。

模組聯邦可以幫助您：

• 減少程式碼重複
• 提高程式碼的可維護性
• 減少應用程式的整體大小
• 提高應用程式效能

如何使用#

模組聯邦 (MF) 目前有多個主要版本，您可以根據自己的需求選擇一個版本。

以下是幾個版本的特性：

模組聯邦 v2.0#

模組聯邦 2.0 在模組聯邦的基礎上提供了一些額外的開箱即用功能，例如動態 TS 類型提示、Chrome 開發人員工具、執行階段外掛、預載，使模組聯邦更適合支援大型 Web 應用程式的微前端架構。模組聯邦 v2.0 是基於 v1.5 實作的。

您需要安裝額外的 @module-federation/enhanced 外掛才能使用模組聯邦 v2.0。

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 來使用它。