什么是微前端

根據Micro-Frontend 官網的定義，微前端是將網站或者 web 應用程序視為由獨立團隊擁有的功能組合。這么說你可能會感到難以理解，通俗地講，微前端就是各個倉庫組件獨立，彼此可以獨立開發和部署，它們彼此之間互不影響，通過通信進行溝通，它們整體對外提供一個完整的服務。

提到微前端，就不得不提微服務，可以說很多前端的想法或者邏輯概念，都是從后端演變出來的，曾經有人開玩笑地說，正是從那些原來做后端的人開始轉向前端之后，前端就開始變得越來越復雜了。

微服務是一種開發軟件的架構和組織方法，其中軟件由通過明確定義的 API 進行通信的小型獨立服務組成。這些服務由各個小型獨立團隊負責。

微服務架構使應用程序更易于擴展和更快地開發，從而加速創新并縮短新功能的上市時間。

為什么要微前端

之前我們的web應用都屬于胖服務器，也就說所有處理都有服務器進行，而前端只是負責簡單的展示，而現在的情況是，服務器處理的內容很少，很多時候都需要前端進行各種計算和處理。在這種情況下，就需要我們采用微前端來加快前端產品的開發和迭代。

微前端優點

• 更容易和更快的功能開發。
• 獨立部署；
• 跨職能團隊；
• 平行發展；
• 松耦合；
• 明確的合同；
• 更容易添加、更改或刪除任何代碼；
• 更容易測試。

構建微前端應用程序有不同的方法，但主要我們可以將它們分為四個重要方面：

• 路由微前端
• 組成微前端
• 微前端通信
• 定義微前端

微前端的組合

微前端由客戶端，服務器端，邊緣測組合而成。

• 客戶端：所有微前端都是在構建時組合和捆綁的。

• 服務器端：最初加載一個容器，微前端在 URL 更改時延遲加載：內容由服務器返回。
• 邊緣側：視圖在 CDN 級別組裝。許多 CDN 提供商為我們提供了使用基于 XML 的標記語言的選項，稱為 Edge Side Includes (ESI)。

微前端的路由

路由主要取決于組合的類型。在服務器端組合中，路由是通過服務器端完成的，因為整個應用程序邏輯都在服務器上。在邊緣組合中，CDN 是突出的參與者，因為它通過基于請求的頁面 URL 在邊緣級別通過嵌入將它們組裝在一起來為微前端提供服務。

在客戶端組合中，微前端是根據需求和應用程序的當前狀態加載的。例如，如果用戶即將認證，則會加載認證微前端或加載登陸頁面。

除了上述路由技術，我們還可以根據需要使用智能路由來配置應用程序。例如，如果我們使用將微前端加載為單頁應用程序的應用程序外殼。然后，app shell 是所有路由邏輯的中心命令。app shell 將管理所有路由邏輯，然后根據其配置決定加載哪個微前端。當我們有復雜的路由時，這是最好的方法之一，因為只有一個故障點或配置。

微前端之間的通信

與路由一樣，微前端之間的通信也取決于組合的類型。當我們在相同或不同頁面上使用多個微前端時，我們總是希望可以和其他微前端用戶交互。

不同微前端之間的溝通可能不是那么微不足道，尤其是當有不同的團隊構建它們時。為了維持獨立部署的原則，我們需要確保每個微前端都不知道其他微前端，即使它們是水平分割的并且是同一頁面的一部分。

在這種情況下，我們有幾個選項可以更好地溝通。

我們可以在前端開發中注入事件總線機制，允許解耦的組件通過在同一視圖中發出事件或總線和不同的微前端來相互通信。如果組件感興趣，它們可以監聽這些事件并做出反應。

我們可以通過添加一個容器來實例化事件總線并將其注入頁面的所有微前端來創建它。

或者，我們也可以使用自定義事件。這些是具有自定義負載的自定義事件。有效負載包括標識事件的字符串和為事件自定義的可選對象。這些自定義事件通過一個常見的類似對象的窗口進行調度，以便所有微前端都可以使用它。

定義微前端

在微前端我們可以使用不同的技術棧，我們可以將vue和react進行結合使用。其中可以單獨為vue構建自己的single-spa，為react構建自己的single-spa，最后兩者通過webpack共同引入使用，并且兩者也可以獨立訪問。具體的代碼在github上有很多實例。

結論

無論是微前端還是微服務，本質上都是為了讓項目開發迭代變得更快，如果因為采用了某個技術而導致項目本身出現了各種問題，我們就是在本末倒置。