微前端簡介

在微前端中，我們將一個整體應用程式劃分為多個較小的應用程式。

每個應用程式負責整體應用程式的獨特功能。
例如，
一個電子商務應用程式可以分為以下較小的獨立微前端應用程式。

• 產品列表
• 購物車
• 運送
• 付款
• 追蹤
• 客戶服務等

為什麼要選擇微前端？

• 多個團隊可以獨立工作，專注於一個 MFE 應用。
• 程式碼復用性非常高。
• 每個團隊可以自由選擇自己的技術（React/Angular/Vue）、部署、開發策略等
• 如果一個應用程式發生故障，其餘應用程式仍然可以運行。
• 每個 MFE 應用程式都較小，因此易於理解和更改。

單體應用程式架構與微前端應用程式架構

單體應用程式：-單一應用程式中網路應用程式的所有功能。
微前端應用程式：-每個功能都由獨立的 MFE 應用程式管理，即
MFE #1 負責 App-bar。
MFE #2 負責產品清單。
MFE #3 負責側邊導覽列。
容器應用程式負責協調這些 MFE 應用程式。

MFE 應用程式如何相互整合

1. 建置時整合（編譯時整合）
2. 運行時整合（客戶端整合）
3. 伺服器端整合（SSR 整合）。

建置時整合（編譯時整合）
在此整合中，容器應用程式可以存取所有 MFE 應用程式原始碼，並且在載入到瀏覽器之前建置/編譯容器應用程式時會建立一個組合包。

優點

• 設定和理解非常簡單。
• MFE 可以透過延遲載入來提高效能。

缺點

• 每次在 MFE npm 套件中進行任何更改時，都需要重建並重新部署容器應用程式。
• 如果多個 MFE 將與容器應用程式緊密耦合，那麼 MFE 應用程式就有可能成為分散式整體應用程式。
• 簡而言之，您的 MFE 與類似於 NPM 套件的容器應用程式整合。

MFE 應用程式如何整合到建置時整合（此處以電子商務應用程式為例）

1. 團隊 #1，開發產品清單 MFE 應用程式。
2. 團隊 #1 部署 Products-List MFE 應用程式並將其發佈為 NPM 套件。
3. 團隊 #2，管理容器應用程序，包括 Products-List MFE 應用程式作為容器應用程式中的 NPM 套件依賴項。
4. 團隊 #2，編譯和建置容器應用程式包，該套件包含容器應用程式的程式碼，包括 Products-List MFE 應用程式程式碼。
5. 簡而言之，您的 MFE 與類似於 NPM 套件的容器應用程式整合。
6. 就是這樣。

運行時整合（客戶端整合）
在此整合中，一旦容器應用程式載入到瀏覽器中，它就可以使用 MFE 應用程式的 url 存取 MFE 應用程式。

優點

• 每個 MFE 都可以部署，無需重新部署容器應用程式。
• 可以使用同一個MFE應用程式的不同版本，容器可以決定使用哪個MFE版本以及何時使用，這使得測試和整合變得容易。
• 每個 MFE 應用程式都可以有自己的工具和函式庫用於開發目的。

缺點

• 運行時 MFE 的設定和整合比建置時 MFE 更複雜。

MFE 應用程式如何整合到運行時整合（此處以電子商務應用程式為例）

1. 團隊 #1，開發產品清單 MFE 應用程式。
2. 團隊 #1 部署 Products-List MFE，即 https://mystore.in/productslist.js
3. 團隊#2，管理容器應用程序，將使用 webpack-module-federation 將其與容器應用程式整合。
4. 當使用者開啟 https://mystore.in/ 時，容器應用程式將載入到瀏覽器中並取得 Products-List MFE 應用程式並將其顯示在容器應用程式頁面中定義的位置。
5. 就是這樣。

服務端整合（SSR 整合）

在此整合中，微前端應用程式的工作方式與 SSR 元件的工作方式類似。所有MFE應用程式都整合在伺服器端，並且複合容器應用程式會返回瀏覽器。

優點

• 應用程式載入速度更快。
• SEO 友善的方法。

缺點

互動性有限。
發展挑戰。

現在就這樣，謝謝您寶貴的時間。

以上是微前端簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！