介紹

Webpack 5 中引入的模組聯合提供了用於建構微前端架構的運行時整合機制。與建置時整合方法不同，它使獨立部署的應用程式能夠在運行時共享程式碼，從而促進團隊自治和增量遷移，而無需協調發布。

從本質上講，模組聯合允許 JavaScript 應用程式在運行時從另一個應用程式動態載入程式碼。每個參與的應用程式都會公開一個 remoteEntry.js 檔案作為入口點。當主機應用程式需要來自遠端的元件時，它會在執行時間取得 remoteEntry.js 並按需解析所需的模組。

使用 ModuleFederationPlugin 進行配置

ModuleFederationPlugin 是用來定義應用程式如何共用程式碼的主要設定介面。

const { ModuleFederationPlugin } = require("webpack").container;

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    catalog: "catalog@https://cdn.example.com/catalog/remoteEntry.js",
  },
  exposes: {
    "./Header": "./src/components/Header",
  },
  shared: {
    react: { singleton: true, requiredVersion: "^18.0.0" },
  },
});

name 欄位用作應用程式的唯一識別碼。 exposes 對應宣告哪些模組可供其他應用程式使用，而 remotes 指定使用的外部應用程式。 shared 配置確保像 React 這樣的關鍵函式庫只會載入一次，從而防止瀏覽器中出現重複實例。

RemoteEntry.js 運行時

當瀏覽器載入主機應用程式時，它不會立即取得聯合模組。相反，主機的 webpack 運行時會初始化共用範圍，且僅當需要遠端模組時，才會取得對應的 remoteEntry.js。該腳本包含可用模組及其區塊位置的清單。

執行時間依賴 __webpack_init_sharing__ 來初始化共享範圍，並依賴 __webpack_share_scopes__ 來管理跨聯合邊界的共享模組的解析。了解此網路瀑布對於調試生產中的負載效能至關重要。

共享依賴策略

管理共享依賴關係是模組聯合最關鍵的面向。 shared 配置支援多種模式：

對於 React 應用程序，單例模式是強制性的——同一 DOM 中的兩個 React 實例會導致不可預測的行為。將 singleton: true 與 requiredVersion: '^18.0.0' 結合起來，以確保所有聯合模組都使用相容的 React 實例。

錯誤處理和回退

遠端模組可能會因網路問題、部署錯誤或版本不匹配而失敗。強大的架構可以優雅地處理這些故障。

const FederatedButton = React.lazy(() =>
  import("catalog/Button").catch(() => import("./fallback/Button"))
);

function App() {
  return (
    <ErrorBoundary fallback={<FallbackUI />}>
      <Suspense fallback={<Skeleton />}>
        <FederatedButton />
      </Suspense>
    </ErrorBoundary>
  );
}

使用 Suspense 進行載入狀態的分層錯誤處理、渲染失敗的錯誤邊界以及本地回退模組可確保遠端故障不會破壞整個應用程式。

部署模式

模組聯合可以實現靈活的部署。共置部署獨立建置每個微前端，但將它們部署在一起。單獨的部署為每個團隊提供了完全的自主權，遙控器指向即時 URL。版本化部署使用標記引用來確保穩定性。

典型的 CI/CD 管道獨立建置每個微前端，將工件發佈到 CDN，並更新主機引用。快取失效至關重要——每個部署都應該產生唯一的區塊雜湊值，以防止過時的快取服務於過時的模組。

結論

Module Federation 提供了一種經過生產驗證的微前端架構方法。從單一主機和遠端設定開始，儘早投資共享依賴項管理，並實施強大的錯誤處理。 螢幕捆綁大小與 webpack-bundle-analyzer 並使用瀏覽器開發工具追蹤執行時間解析度。官方模組聯盟文件和 Zack Jackson 的範例儲存庫提供了出色的起始積分。