微前端

微前端是一種架構(gòu)風(fēng)格，旨在將大型前端應(yīng)用程序拆分為更小、更可管理的部分。它通過將前端應(yīng)用程序劃分為多個(gè)獨(dú)立的子應(yīng)用，每個(gè)子應(yīng)用都有自己的代碼庫和獨(dú)立的開發(fā)團(tuán)隊(duì)來實(shí)現(xiàn)。這些子應(yīng)用可以獨(dú)立部署、獨(dú)立運(yùn)行，并且可以在同一個(gè)頁面上協(xié)同工作。

微前端的核心思想是將前端應(yīng)用程序拆分為多個(gè)獨(dú)立的功能模塊，每個(gè)模塊都可以獨(dú)立開發(fā)、測試和部署。這樣可以提高開發(fā)效率，降低代碼耦合度，并且可以讓不同團(tuán)隊(duì)獨(dú)立開發(fā)不同的模塊，從而提高團(tuán)隊(duì)的協(xié)作效率。

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

總之，微前端是一種將前端應(yīng)用程序拆分為多個(gè)獨(dú)立子應(yīng)用的架構(gòu)風(fēng)格，可以提高開發(fā)效率、降低代碼耦合度，并且可以讓不同團(tuán)隊(duì)獨(dú)立開發(fā)不同的模塊，從而提高團(tuán)隊(duì)的協(xié)作效率。

架構(gòu)理念

微前端并不是一項(xiàng)新的技術(shù)，而是一種架構(gòu)理念，它將單一的 web 應(yīng)用拆解成多個(gè)可以獨(dú)立開發(fā)、獨(dú)立運(yùn)行、獨(dú)立部署的小型應(yīng)用，并將它們整合為一個(gè)應(yīng)用。

在實(shí)際業(yè)務(wù)中，我們也遇到同樣的問題，并且在不同的業(yè)務(wù)場景下嘗試了各種解決方案，如 iframe、npm 包、微前端框架，并對各種方案的優(yōu)劣進(jìn)行了對比。

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

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

微前端框架：流行的微前端框架有 single-spa 和 qiankun，它們將維護(hù)成本和功能上達(dá)到一種平衡，是目前實(shí)現(xiàn)微前端備受推崇的方案。

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

圖片

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

微前端的核心在于資源加載與渲染，iframe 的渲染方式就是一個(gè)典型，只要能夠?qū)崿F(xiàn)一種元素隔離的功能并且路由符合要求，子應(yīng)用理論上不需要修改代碼就可以嵌入另外一個(gè)頁面渲染，

micro-app

圖片

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

micro-app 與技術(shù)棧無關(guān)，也不和業(yè)務(wù)綁定，可以用于任何前端框架。

在線案例

圖片

micro-app 優(yōu)勢

micro-app 是京東出品，一款基于 WebComponent 的思想，輕量、高效、功能強(qiáng)大的微前端框架。micro-app 作為一個(gè)用于實(shí)現(xiàn)微前端架構(gòu)的開源庫，具有以下幾個(gè)優(yōu)勢：

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

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

橫向?qū)Ρ?/h2>

圖片

為什么選擇 WebComponent ?

圖片

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

• CustomElement 用于創(chuàng)建自定義標(biāo)簽。
• ShadowDom 用于創(chuàng)建陰影 DOM，陰影DOM具有天然的樣式隔離和元素隔離屬性。

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

圖片

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

• 類 WebComponent，就是使用 CustomElement 結(jié)合自定義的 ShadowDom 實(shí)現(xiàn) WebComponent 基本一致的功能。
• HTML Entry，就是微前端架構(gòu)中的一個(gè)概念，指的是每個(gè)獨(dú)立子應(yīng)用的入口點(diǎn)。在微前端架構(gòu)中，每個(gè)子應(yīng)用都有自己的 HTML 入口文件，用于加載和渲染該子應(yīng)用的內(nèi)容。通過加載遠(yuǎn)程 html，解析其 DOM 結(jié)構(gòu)從而獲取 js、css 等靜態(tài)資源來實(shí)現(xiàn)微前端的渲染，這也 是qiankun 目前采用的渲染方案。

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

micro-app 核心原理

micro-app 的核心功能在 CustomElement 基礎(chǔ)上進(jìn)行構(gòu)建，CustomElement 用于創(chuàng)建自定義標(biāo)簽，并提供了元素的渲染、卸載、屬性修改等鉤子函數(shù)，通過鉤子函數(shù)獲知微應(yīng)用的渲染時(shí)機(jī)，并將自定義標(biāo)簽作為容器，微應(yīng)用的所有元素和樣式作用域都無法逃離容器邊界，從而形成一個(gè)封閉的環(huán)境。

圖片

小結(jié)

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

參考

• 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