微前端

微前端是一種架構風格，旨在將大型前端應用程序拆分為更小、更可管理的部分。它通過將前端應用程序劃分為多個獨立的子應用，每個子應用都有自己的代碼庫和獨立的開發團隊來實現。這些子應用可以獨立部署、獨立運行，并且可以在同一個頁面上協同工作。

微前端的核心思想是將前端應用程序拆分為多個獨立的功能模塊，每個模塊都可以獨立開發、測試和部署。這樣可以提高開發效率，降低代碼耦合度，并且可以讓不同團隊獨立開發不同的模塊，從而提高團隊的協作效率。

在微前端架構中，每個子應用都可以使用不同的技術棧和框架，因此可以根據具體需求選擇最適合的技術棧。同時，微前端還提供了一些通信機制，使得不同子應用之間可以進行跨域通信和共享數據。

總之，微前端是一種將前端應用程序拆分為多個獨立子應用的架構風格，可以提高開發效率、降低代碼耦合度，并且可以讓不同團隊獨立開發不同的模塊，從而提高團隊的協作效率。

架構理念

微前端并不是一項新的技術，而是一種架構理念，它將單一的 web 應用拆解成多個可以獨立開發、獨立運行、獨立部署的小型應用，并將它們整合為一個應用。

在實際業務中，我們也遇到同樣的問題，并且在不同的業務場景下嘗試了各種解決方案，如 iframe、npm 包、微前端框架，并對各種方案的優劣進行了對比。

iframe：在所有微前端方案中，iframe 是最穩定的、上手難度最低的，但它有一些無法解決的問題，例如性能低、通信復雜、雙滾動條、彈窗無法全局覆蓋，它的成長性不高，只適合簡單的頁面渲染。

npm 包：將子應用封裝成 npm 包，通過組件的方式引入，在性能和兼容性上是最優的方案，但卻有一個致命的問題就是版本更新，每次版本發布需要通知接入方同步更新，管理非常困難。

微前端框架：流行的微前端框架有 single-spa 和 qiankun，它們將維護成本和功能上達到一種平衡，是目前實現微前端備受推崇的方案。

• single-spa 是一個將多個單頁面應用聚合為一個整體應用的 JavaScript 微前端框架。
• qiankun 基于 single-spa 封裝的微前端框架。qiankun繼承了umi框架，但是這個框架配置起來比較麻煩。

圖片

在 single-spa 和 qiankun 中都是通過監聽 url change 事件，在路由變化時匹配到渲染的子應用并進行渲染。這種基于路由監聽渲染是 single-spa 最早實現的，作為出現最早、最有影響力的微前端框架，single-spa 被很多框架和公司借鑒，也導致目前實現的微前端的方式大多是基于路由監聽。

微前端的核心在于資源加載與渲染，iframe 的渲染方式就是一個典型，只要能夠實現一種元素隔離的功能并且路由符合要求，子應用理論上不需要修改代碼就可以嵌入另外一個頁面渲染，

micro-app

圖片

micro-app 是京東零售推出的一款微前端框架，它基于類 WebComponent 進行渲染，從組件化的思維實現微前端，旨在降低上手難度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、樣式隔離、元素隔離、預加載、資源地址補全、插件系統、數據通信等一系列完善的功能。

micro-app 與技術棧無關，也不和業務綁定，可以用于任何前端框架。

在線案例

圖片

micro-app 優勢

micro-app 是京東出品，一款基于 WebComponent 的思想，輕量、高效、功能強大的微前端框架。micro-app 作為一個用于實現微前端架構的開源庫，具有以下幾個優勢：

1. 解耦和獨立開發：micro-app允許將前端應用程序拆分為多個獨立的子應用，每個子應用都有自己的代碼庫和獨立的開發團隊。這種解耦和獨立開發的方式可以提高開發效率，降低代碼耦合度，并且可以讓不同團隊獨立開發不同的模塊，從而提高團隊的協作效率。
2. 靈活的技術棧選擇：micro-app允許每個子應用使用不同的技術棧和框架，因此可以根據具體需求選擇最適合的技術棧。這種靈活的技術棧選擇可以滿足不同團隊的技術偏好和需求，同時也可以利用現有的技術棧和框架的優勢。
3. 動態加載和卸載：micro-app支持動態加載和卸載子應用，使得應用程序可以根據需要動態加載和卸載子應用。這種動態加載和卸載的方式可以提高應用程序的性能和可擴展性，同時也可以減少初始加載時間和資源占用。
4. 跨域通信和共享數據：micro-app提供了一些通信機制，使得不同子應用之間可以進行跨域通信和共享數據。這種跨域通信和共享數據的方式可以實現子應用之間的交互和數據共享，從而提供更豐富的功能和用戶體驗。
5. 生態和社區支持：micro-app作為一個開源庫，擁有活躍的社區和豐富的生態系統。開發者可以從社區中獲取支持、學習和分享經驗，同時也可以使用社區提供的插件和工具來擴展和增強micro-app的功能。

micro-app 使用起來成本最低，將所有的頁面封裝到一個類 WebComponent 組件中，從而實現在主應用基座中嵌入一行代碼即可渲染一個微前端應用。不需要像 single-spa 和 qiankun 一樣要求子應用修改渲染邏輯并暴露出方法，也不需要修改 webpack 配置，是目前市面上接入微前端成本最低的方案。提供了 js沙箱、樣式隔離、元素隔離、預加載、數據通信、靜態資源補全等一系列完善的功能。沒有任何依賴，這賦予它小巧的體積和更高的擴展性。為了保證各個業務之間獨立開發、獨立部署的能力，micro-app 做了諸多兼容，在任何技術框架中都可以正常運行。

橫向對比

圖片

為什么選擇 WebComponent ?

圖片

WebComponent 核心組成有兩部分：CustomElement 和 ShadowDom。

• CustomElement 用于創建自定義標簽。
• ShadowDom 用于創建陰影 DOM，陰影DOM具有天然的樣式隔離和元素隔離屬性。

由于 WebComponent 是原生組件，它可以在任何框架中使用，理論上是實現微前端最優的方案。但 WebComponent 有一個無法解決的問題 - ShadowDom的兼容性非常不好，一些前端框架在 ShadowDom 環境下無法正常運行，尤其是 react 框架。

圖片

而對于 micro-app 它選擇了另外一條路類 WebComponent + HTML Entry。

• 類 WebComponent，就是使用 CustomElement 結合自定義的 ShadowDom 實現 WebComponent 基本一致的功能。
• HTML Entry，就是微前端架構中的一個概念，指的是每個獨立子應用的入口點。在微前端架構中，每個子應用都有自己的 HTML 入口文件，用于加載和渲染該子應用的內容。通過加載遠程 html，解析其 DOM 結構從而獲取 js、css 等靜態資源來實現微前端的渲染，這也 是qiankun 目前采用的渲染方案。

micro-app，它的渲染機制和功能與 WebComponent 類似，開發者可以像使用 web 組件一樣接入微前端。它可以兼容任何框架，在使用方式和數據通信上也更加組件化，這顯著降低了基座應用的接入成本，并且由于元素隔離的屬性，子應用的改動量也大大降低。

micro-app 核心原理

micro-app 的核心功能在 CustomElement 基礎上進行構建，CustomElement 用于創建自定義標簽，并提供了元素的渲染、卸載、屬性修改等鉤子函數，通過鉤子函數獲知微應用的渲染時機，并將自定義標簽作為容器，微應用的所有元素和樣式作用域都無法逃離容器邊界，從而形成一個封閉的環境。

圖片

小結

micro-app 將所有功能都封裝到一個類 WebComponent 組件中，從而實現在基座應用中嵌入一行代碼即可渲染一個微前端應用。同時micro-app 還提供了js沙箱、樣式隔離、元素隔離、預加載、數據通信、靜態資源補全等一系列完善的功能。micro-app 零依賴，沒有任何依賴，這賦予它小巧的體積和更高的擴展性。micro-app 兼容所有框架，為了保證各個業務之間獨立開發、獨立部署的能力，micro-app 做了諸多兼容，在任何技術框架中都可以正常運行。

參考

• https://gitee.com/helibin/micro-app
• https://mp.weixin.qq.com/s/BvjjCs8qaxrl00R-Sr7tSg
• http://www.codebox.com.cn/?id=27903
• https://zhuanlan.zhihu.com/p/519416291