在微前端中,我們將一個整體應用程式劃分為多個較小的應用程式。
每個應用程式負責整體應用程式的獨特功能。
例如,
一個電子商務應用程式可以分為以下較小的獨立微前端應用程式。
為什麼要選擇微前端?
- 多個團隊可以獨立工作,專注於一個 MFE 應用。
- 程式碼復用性非常高。
- 每個團隊可以自由選擇自己的技術(React/Angular/Vue)、部署、開發策略等
- 如果一個應用程式發生故障,其餘應用程式仍然可以運行。
- 每個 MFE 應用程式都較小,因此易於理解和更改。
單體應用程式架構與微前端應用程式架構
單體應用程式:-單一應用程式中網路應用程式的所有功能。
微前端應用程式:-每個功能都由獨立的 MFE 應用程式管理,即
MFE #1 負責 App-bar。
MFE #2 負責產品清單。
MFE #3 負責側邊導覽列。
容器應用程式負責協調這些 MFE 應用程式。
MFE 應用程式如何相互整合
- 建置時整合(編譯時整合)
- 運行時整合(客戶端整合)
- 伺服器端整合(SSR 整合)。
建置時整合(編譯時整合)
在此整合中,容器應用程式可以存取所有 MFE 應用程式原始碼,並且在載入到瀏覽器之前建置/編譯容器應用程式時會建立一個組合包。
優點
- 設定和理解非常簡單。
- MFE 可以透過延遲載入來提高效能。
缺點
- 每次在 MFE npm 套件中進行任何更改時,都需要重建並重新部署容器應用程式。
- 如果多個 MFE 將與容器應用程式緊密耦合,那麼 MFE 應用程式就有可能成為分散式整體應用程式。
- 簡而言之,您的 MFE 與類似於 NPM 套件的容器應用程式整合。
MFE 應用程式如何整合到建置時整合(此處以電子商務應用程式為例)
- 團隊 #1,開發產品清單 MFE 應用程式。
- 團隊 #1 部署 Products-List MFE 應用程式並將其發佈為 NPM 套件。
- 團隊 #2,管理容器應用程序,包括 Products-List MFE 應用程式作為容器應用程式中的 NPM 套件依賴項。
- 團隊 #2,編譯和建置容器應用程式包,該套件包含容器應用程式的程式碼,包括 Products-List MFE 應用程式程式碼。
- 簡而言之,您的 MFE 與類似於 NPM 套件的容器應用程式整合。
- 就是這樣。
運行時整合(客戶端整合)
在此整合中,一旦容器應用程式載入到瀏覽器中,它就可以使用 MFE 應用程式的 url 存取 MFE 應用程式。
優點
- 每個 MFE 都可以部署,無需重新部署容器應用程式。
- 可以使用同一個MFE應用程式的不同版本,容器可以決定使用哪個MFE版本以及何時使用,這使得測試和整合變得容易。
- 每個 MFE 應用程式都可以有自己的工具和函式庫用於開發目的。
缺點
- 運行時 MFE 的設定和整合比建置時 MFE 更複雜。
MFE 應用程式如何整合到運行時整合(此處以電子商務應用程式為例)
- 團隊 #1,開發產品清單 MFE 應用程式。
- 團隊 #1 部署 Products-List MFE,即 https://mystore.in/productslist.js
- 團隊#2,管理容器應用程序,將使用 webpack-module-federation 將其與容器應用程式整合。
- 當使用者開啟 https://mystore.in/ 時,容器應用程式將載入到瀏覽器中並取得 Products-List MFE 應用程式並將其顯示在容器應用程式頁面中定義的位置。
- 就是這樣。
服務端整合(SSR 整合)
在此整合中,微前端應用程式的工作方式與 SSR 元件的工作方式類似。所有MFE應用程式都整合在伺服器端,並且複合容器應用程式會返回瀏覽器。
優點
缺點
互動性有限。
發展挑戰。
現在就這樣,謝謝您寶貴的時間。
以上是微前端簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章!