今天，我們很高興地宣布 Module Federation 2.0 正式釋出了！

這是一個由 ByteDance Web Infra 團隊與 Module Federation 的作者 @Zack Jackson 共同推出的新版本。Module Federation 2.0 解決了原有版本存在的諸多問題，新版本基于 Bytedance 内部實踐以及 Module Federation 原有社群生态實作。

代碼倉庫： https://github.com/module-federation/core

官方文檔：https://module-federation.io/

為什麼要用 Module Federation 2.0？

Module Federation 作為 Webpack 5 推出的重磅功能，自釋出以來已經三年有餘。作為一種子產品共享方案，它已經被廣泛使用，并受到了大型 Web 項目的歡迎。Module Federation 讓開發大型 Web 應用和團隊協同變得更加高效和簡單。然而，随着 Module Federation 的使用日益廣泛，也遇到了新的問題。為此，Module Federation 2.0 針對這些問題提出了全新的解決方案：

增加最佳實踐：Module Federation 2.0 推出了新的獨立文檔站點，這裡彙集了關于 Module Federation 的最佳實踐。通過這些指導，你可以更高效地利用 Module Federation。
Runtime 與建構工具解耦：在 Module Federation 2.0 中，Runtime 與建構工具實作了解耦。這一變化統一了各建構工具對 Module Federation 的實作标準，并使得子產品加載過程更加靈活。
類型安全：為了確定類型安全，Module Federation 2.0 的建構插件會為 TypeScript 項目自動生成并加載類型定義。在開發模式下，類型會自動同步，以保證代碼的類型準确性。
調試工具： Module Federation 2.0 引入了 devtool 工具，旨在簡化調試過程。這些工具讓開發者能夠更輕松、更高效地進行 Module Federation 的調試工作。
部署平台： Module Federation 2.0 新增了 mf-manifest.json 檔案協定，這使得在部署平台上的版本資源和版本控制變得更加簡單可行。

Module Federation 新文檔站

新文檔詳細介紹了 Module Federation 的适用場景和功能。它涵蓋了從零開始使用 Rspack 建立項目，到運用 Module Federation 的全過程。同時，對 Module Federation 插件的配置進行了深入的闡述和說明。

Module Federation 子產品加載更加靈活

Module Federation 的新版本帶來了顯著的變化。在這個版本中，原本嵌入在 Webpack 中的 Module Federation Runtime 能力被提取出來，形成了一個獨立的 SDK。這個變化意味着，現在我們可以不依賴于任何建構工具，就能夠動态地注冊和加載遠端子產品，以及注冊共享子產品。此外，子產品的預加載和運作時插件的使用也得到了增強，進而為子產品的加載過程提供了更為強大的控制能力。

解綁 Webpack，支援跨工具共享子產品

新版 Module Federation 插件采用了全新的 Runtime 架構。這一變化使得建構工具不再需要與 Runtime 強綁定。開發者有望在項目中自由地引入由不同建構工具的産物，并靈活地組裝它們進行運作。

目前，已經有多個建構工具與之相容，包括 Webpack、Rspack 。其他建構工具也可以依據這一标準實作 Module Federation，這将保持運作時的一緻性和标準化。

類型提示

Module Federation 插件的新版本引入了一項突破性的功能——動态子產品類型提示！這一功能有效地解決了将本地子產品轉換為動态遠端子產品時，在 TypeScript 項目中遇到的類型丢失問題。現在，使用該插件不僅可以自動生成和使用遠端類型，而且當所有項目都在本地運作時，還能實作類似于 npm link 的類型實時更新體驗。

Module Federation Devtool

Module Federation Devtool 是一款為 Module Federation 開發的調試工具。它能夠清晰地展示子產品間的依賴關系，以及 Expose 和 shared 的配置情況。此外，該工具還支援将線上頁面中的 Module Federation 子產品代理到本地開發環境，并且保持熱更新功能，以提供流暢的開發體驗。

Manifest 協定

Module Federation 建構插件會生成一個關鍵的 Manifest 檔案。這份檔案包含了 Module Federation 的基本資訊，例如 remoteEntry、shared、exposes、remotes 和 type。這些資訊對于分析項目間的依賴關系至關重要，有助于我們建構和優化物料平台。通過這種方式，我們能夠對不同部署平台的 Module Federation 子產品版本進行精細的版本和灰階管理。此外，建構插件和運作時可以直接使用 Manifest 檔案協定，以實作更為進階的功能。例如，動态類型提示功能就是在最新版本中，基于 Manifest 檔案協定開發的。

緻謝

新版 Module Federation 的發展離不開社群内衆多項目的啟發和支援。在此，我們向這些項目表示深深的敬意和感激：

Webpack Module Federation。新版 Module Federation 對其進行了 fork，并在此基礎上重新設計和實施。
Rspack 項目。Rspack 團隊基于 Module Federation Runtime 實作了 Module Federation，確定了 Module Federation 2.0 與 Rspack 生态的完全相容。

未來計劃

優化開發者體驗。雖然新版本中引入了動态類型提示和 Chrome 開發者工具支援，但目前 Chrome 開發者工具的功能尚顯不足。我們計劃對 Module Federation 的調試工具進行增強，比如增加 shared 複用的可視化功能。
提供高性能方案。Module Federation，作為微前端架構的一種方案，同樣面臨微前端架構所特有的“請求瀑布問題”。為了解決這一問題，Module Federation 計劃提供了一系列高性能的解決政策，包括伺服器端渲染（SSR）和資料預擷取（Data prefetch）等。
跟社群内的夥伴合作。Module Federation 2.0 的新功能，目前隻有 Webpack 和 Rspack 這兩款建構工具支援。Module Federation 提供了一套豐富的基礎 SDK，便于其他建構工具在此基礎上進行擴充封裝。目前，Module Federation 主要用作子產品共享的解決方案。我們的計劃是，與上層架構結合，提供一系列基于 Module Federation 的微前端架構最佳實踐。這将幫助開發者更好地滿足大型 Web 應用在微前端架構開發上的需求。

試用

檢視倉庫：https://github.com/module-federation/universe

檢視我們的 Quick Start：https://module-federation.io/zh/guide/start/quick-start.html

Module Federation 2.0 正式釋出！