首頁  >  文章  >  web前端  >  微前端簡介

微前端簡介

WBOY
WBOY原創
2024-08-30 19:04:11733瀏覽

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

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

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

為什麼要選擇微前端?

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

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

Introduction to Micro-frontend

單體應用程式:-單一應用程式中網路應用程式的所有功能。
微前端應用程式:-每個功能都由獨立的 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn