一、什麼是微前端？

　　微前端將微服務理念擴充套件到前端開發，一般來講一個微服務架構中會有多個後端團隊開發不同的業務服務，而前端通常只有一個團隊，集中維護一個 SPA 單頁應用，隨著時間累加，前端團隊維護的 SPA 會隨著業務增長越來越大，變得難以維護（專案啟動耗時、CI\CD 耗時等）;

　　微前端可以幫助我們像後端一樣將 SPA 應用按照業務拆分為多個可獨立維護部署的應用，這樣一方面我們可以實現，哪個業務改變就近更新哪個業務的前端；又可以幫助搭建從前端到後端單一業務領域的團隊。

　　可以理解為微前端是一種將多個可獨立交付的小型前端應用聚合為一個整體的架構風格。

　　那麼什麼樣的產品適合微前端呢：（1）大型前端專案；（2）多個專案間跨應用模組共享；（3）有拆分出多個獨立的子系統，獨立部署維護的需求。

二、webpack5 模組聯邦 module Federation 介紹

　　webpack5 新增 Module Federation（模組聯邦）功能，他可以幫助將多個獨立的構建組成一個應用程式，不同的構建可以獨立的開發與部署。藉助模組聯邦我們可以一定程度的實現微前端。

1、模組聯邦能幹什麼？

　　模組聯邦提供了可以在當前應用中遠端載入其他伺服器上應用的能力，使用 module Federation 可以實現一個去中心化的應用部署群，每個應用都單獨部署，每個應用都可以引用其他應用，也能被其他應用所引用（js 級別）

　　藉助第三方工具可實現跨技術棧開發 （react + vue 2）

　　可以用來實現前端專案平滑迭代（舊專案是一個應用，新專案是一個應用，兩者之間通過遠端連線，這樣我們可以逐漸豐富 新專案來替換舊專案的內容）

　　又可以幫助搭建從前端到後端單一業務領域的團隊

2、什麼是本地模組與遠端模組，什麼是 host \ remote？

　　host：消費其他 remote 的 webpack 構建（即使用遠端模組的應用）

　　remote: 被 host 消費的 webpack 構建（即提供可用的模組給其他應用使用）

　　host 與 remote 是相對的，一個應用既可以是 host 有可以是 remote，因此 模組聯邦實現的微前端又是去中心化的。

　　本地模組即為我們本地開發時當前專案內的模組

　　遠端模組不屬於當前構建，它是在執行時被載入進來的 remote 應用提供的模組

3、模組聯邦的負面影響

　　執行時載入遠端模組等邏輯，可能導致一定的效能問題

　　本地開發需要開啟多個埠的服務，比較麻煩

　　按需載入第三方依賴比較難實現

　　比起傳統 spa 專案結構上有些複雜

　　迭代時的版本控制需要更多關注

4、此外還會有一些疑難雜症需要解決，具體可以看這篇文章：《webpack 5 模組聯邦實現微前端疑難問題解決 - https://blog.csdn.net/mjzhang1993/article/details/115871597》