建站
咨詢
售后
建站咨詢
新聞中心
什么是微前端
微前端架構(gòu)具備以下的特點(diǎn)：
公司主營業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出淇濱免費(fèi)做網(wǎng)站回饋大家。
- 技術(shù)棧無關(guān)。主框架不限制接入應(yīng)用的技術(shù)棧，微應(yīng)用具備完全自主權(quán)
- 獨(dú)立開發(fā)、獨(dú)立部署。微應(yīng)用倉庫獨(dú)立，前后端可獨(dú)立開發(fā)，部署完成后主框架自動完成同步更新
- 增量升級。在面對各種復(fù)雜場景時，我們通常很難對一個已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級或重構(gòu)，而微前端是一種非常好的實施漸進(jìn)式重構(gòu)的手段和策略
- 獨(dú)立運(yùn)行時。每個微應(yīng)用之間狀態(tài)隔離，運(yùn)行時狀態(tài)不共享
微前端解決了什么問題?
微前端架構(gòu)旨在解決單體應(yīng)用在一個相對長的時間跨度下，由于參與的人員、團(tuán)隊的增多、變遷，從一個普通應(yīng)用演變成一個巨石應(yīng)用(Frontend Monolith)后，隨之而來的應(yīng)用不可維護(hù)的問題。比如：
- 原本一個團(tuán)隊管理的項目，后面多個團(tuán)隊進(jìn)行管理
- 隨著項目的體積變大，編譯的速度變長，研發(fā)效率降低
- 項目變大，系統(tǒng)的復(fù)雜度也會隨之變大，可維護(hù)性越來越低，重構(gòu)成本越來越大
- ...
通過微前端拆分成一個容器應(yīng)用和多個子應(yīng)用之后，各個應(yīng)用能夠獨(dú)立部署，相互之間隔離，從而做到：
- 研發(fā)效率提升：多業(yè)務(wù)線并行開發(fā)，團(tuán)隊自治，獨(dú)立迭代
- 運(yùn)維風(fēng)險降級：變更范圍縮小
- 技術(shù)選擇增多：各個應(yīng)用可以選擇更加適合自身的技術(shù)棧
- 重構(gòu)風(fēng)險降低：低風(fēng)險局部替換，漸進(jìn)式完成大規(guī)模重構(gòu)
- ...
微前端實現(xiàn)方案
對比Nginx路由轉(zhuǎn)發(fā)
通過Nginx配置反向代理來實現(xiàn)不同路徑映射到不同應(yīng)用，例如www.abc.com/app1對應(yīng)app1，www.abc.com/app2對應(yīng)app2，這種方案本身并不屬于前端層面的改造，更多的是運(yùn)維的配置。
優(yōu)點(diǎn)：
- 簡單，快速，易配置
缺點(diǎn)：
- 在切換應(yīng)用時會觸發(fā)瀏覽器刷新，影響體驗
iframe嵌套
父應(yīng)用單獨(dú)是一個頁面，每個子應(yīng)用嵌套一個iframe，父子通信可采用postMessage或者contentWindow方式。
優(yōu)點(diǎn)：
- 實現(xiàn)簡單，子應(yīng)用之間自帶沙箱，天然隔離，互不影響
缺點(diǎn)：
- url 不同步。瀏覽器刷新 iframe url 狀態(tài)丟失、后退前進(jìn)按鈕無法使用。
- UI 不同步，DOM 結(jié)構(gòu)不共享。想象一下屏幕右下角 1/4 的 iframe 里來一個帶遮罩層的彈框，同時我們要求這個彈框要瀏覽器居中顯示，還要瀏覽器 resize 時自動居中..
- 全局上下文完全隔離，內(nèi)存變量不共享。iframe 內(nèi)外系統(tǒng)的通信、數(shù)據(jù)同步等需求，主應(yīng)用的 cookie 要透傳到根域名都不同的子應(yīng)用中實現(xiàn)免登效果。
- 慢。每次子應(yīng)用進(jìn)入都是一次瀏覽器上下文重建、資源重新加載的過程。
Web Components
每個子應(yīng)用需要采用純Web Components技術(shù)編寫組件，是一套全新的開發(fā)模式
優(yōu)點(diǎn)：
- 每個子應(yīng)用擁有獨(dú)立的script和css，也可單獨(dú)部署
缺點(diǎn)：
- 對于歷史系統(tǒng)改造成本高，子應(yīng)用通信較為復(fù)雜易踩坑
webpack5 的 Module Federation
使用 Module Federation，我們可以在一個應(yīng)用中動態(tài)加載并執(zhí)行另一個應(yīng)用的代碼，且與技術(shù)棧無關(guān)，并且能夠共享模塊，從而減小編譯時間以及降低包體積。
優(yōu)點(diǎn)：
- 能夠共享模塊，減小編譯時間以及降低包體積
缺點(diǎn)：
- 需要升級 webpack5，構(gòu)建工具受限
組合式應(yīng)用路由分發(fā)
每個子應(yīng)用獨(dú)立構(gòu)建和部署，運(yùn)行時由父應(yīng)用來進(jìn)行路由管理，應(yīng)用加載，啟動，卸載，以及通信機(jī)制。
優(yōu)點(diǎn)：
- 純前端改造，體驗良好，可無感知切換，子應(yīng)用相互隔離
缺點(diǎn)：
- 需要設(shè)計和開發(fā)，由于父子應(yīng)用處于同一頁面運(yùn)行，需要解決子應(yīng)用的樣式?jīng)_突，變量對象污染，通信機(jī)制等技術(shù)點(diǎn)
組合式應(yīng)用路由分發(fā)是目前業(yè)內(nèi)普遍使用的一種方案，并且能夠滿足大部分需求，接下來我們詳細(xì)來看看這種實現(xiàn)方式。
組合式應(yīng)用路由分發(fā)的微前端實現(xiàn)思路
該方案使用的是基座模式，通過一個主應(yīng)用(基座應(yīng)用-Main APP)，來管理其它應(yīng)用(子應(yīng)用-MicroAPP)?；鶓?yīng)用大多數(shù)是一個前端 SPA 項目，主要負(fù)責(zé)應(yīng)用注冊，路由映射，消息下發(fā)等，而微應(yīng)用是獨(dú)立前端項目，這些項目不限于采用 React，Vue，Angular 或者 JQuery 開發(fā)，每個微應(yīng)用注冊到基座應(yīng)用中，由基座進(jìn)行管理，但是如果脫離基座也是可以單獨(dú)訪問。
當(dāng)整個微前端框架運(yùn)行之后，給用戶的體驗就是類似下圖所示：
簡單描述下就是基座應(yīng)用中有一些菜單項，點(diǎn)擊每個菜單項可以展示對應(yīng)的微應(yīng)用，這些應(yīng)用的切換是純前端無感知的
上面的實現(xiàn)過程主要如下：
- 獲取注冊表和進(jìn)行初始化，這些都是在基座應(yīng)用中進(jìn)行的。
- 路由分發(fā)。在瀏覽器路徑發(fā)生變化后，基座應(yīng)用會監(jiān)聽 hashchange 或者 popstate 事件，從而獲取到路由切換的時機(jī)。通過查詢注冊信息可以獲取到轉(zhuǎn)發(fā)到那個微應(yīng)用，經(jīng)過一些邏輯處理后，采用修改hash方法或者pushState方法來路由信息推送給微應(yīng)用的路由，微應(yīng)用可以是手動監(jiān)聽hashchange或者popstate事件接收，或者采用React-router，vue-router接管路由，后面的邏輯就由微應(yīng)用自己控制。
- 遠(yuǎn)程拉取資源，加載應(yīng)用。這里一般有通過 JavaScript Entry 或者 HTML Entry 作為渲染入口。
注意：子應(yīng)用也可以將包打成多個，然后利用 webpack 的 webpack-manifest-plugin 插件打包出 manifest.json
文件，生成一份資源清單，然后主應(yīng)用的 loadApp 遠(yuǎn)程讀取每個子應(yīng)用的清單文件，依次加載文件里面的資源;不過該方案也沒辦法享受子應(yīng)用的按需加載能力。
- HTML Entry。則更加靈活，直接將子應(yīng)用打出來 HTML 作為入口，主框架可以通過 fetch html 的方式獲取子應(yīng)用的靜態(tài)資源，同時將 HTML document 作為子節(jié)點(diǎn)塞到主框架的容器中。這樣不僅可以極大的減少主應(yīng)用的接入成本，子應(yīng)用的開發(fā)方式及打包方式基本上也不需要調(diào)整，而且可以天然的解決子應(yīng)用之間樣式隔離的問題(后面提到)。這種方案可以通過 。
- JavaScript Entry。通常是子應(yīng)用將資源打成一個 entry script。但這個方案的限制也頗多，如要求子應(yīng)用的所有資源打包到一個 js bundle 里，包括 css、圖片等資源。除了打出來的包可能體積龐大之外的問題之外，資源的并行加載等特性也無法利用上。
微前端的應(yīng)用隔離
CSS 隔離
當(dāng)主應(yīng)用和微應(yīng)用同屏渲染時，就可能會有一些樣式會相互污染，可以采取以下兩種方案：
- CSS Module
- 命名空間，通過 webpack 的 postcss 插件，在打包時添加特定的前綴，即各個子應(yīng)用使用特定的前綴來命名 class。但對于一些插入到 body 中的樣式，比如 element UI 的 Popover 彈出框，這種就特殊處理。
而對于微應(yīng)用與微應(yīng)用之間的CSS隔離就非常簡單，在每次應(yīng)用加載時，將該應(yīng)用所有的link和style 內(nèi)容進(jìn)行標(biāo)記。在應(yīng)用卸載后，同步卸載頁面上對應(yīng)的link和style即可。
JavaScript 隔離
每當(dāng)微應(yīng)用的 JavaScript 被加載并運(yùn)行時，它的核心實際上是對全局對象 Window 的修改以及一些全局事件的改變，例如 jQuery 這個 js 運(yùn)行后，會在 Window 上掛載一個 window.$ 對象，對于其他庫 React，Vue 也不例外。為此，需要在加載和卸載每個微應(yīng)用的同時，盡可能消除這種沖突和影響，最普遍的做法是采用沙箱機(jī)制(SandBox)。
沙箱機(jī)制的核心是讓局部的 JavaScript 運(yùn)行時，對外部對象的訪問和修改處在可控的范圍內(nèi)，即無論內(nèi)部怎么運(yùn)行，都不會影響外部的對象。通常在 Node.js 端可以采用 vm 模塊，而對于瀏覽器，則需要結(jié)合 with 關(guān)鍵字和 window.Proxy 對象來實現(xiàn)瀏覽器端的沙箱。
微前端的消息通信
微前端通常不會限制應(yīng)用采用的框架，如何在不同的應(yīng)用，框架之間進(jìn)行通信是一個需要仔細(xì)考量的決定。應(yīng)用間通信有很多種方式，當(dāng)然，要讓多個分離的微應(yīng)用之間要做到通信，本質(zhì)上仍離不開中間媒介或者說全局對象。
自定義事件
通過事件[3]進(jìn)行通信應(yīng)該是最簡單、通用的方案了。
// 監(jiān)聽事件
window.addEventListener('message', (event) => {
// 處理事件
});
// 觸發(fā)事件
window.dispatchEvent(new CustomEvent('message', { detail: input.value }))
發(fā)布-訂閱
消息訂閱(pub/sub)模式的通信機(jī)制是非常適用的，在基座應(yīng)用中會定義事件中心Event，每個微應(yīng)用分別來注冊事件，當(dāng)被觸發(fā)事件時再有事件中心統(tǒng)一分發(fā)，這就構(gòu)成了基本的通信機(jī)制。
import { Observable } from 'windowed-observable';
const observable = new Observable('konoha');
observable.subscribe((ninja) => {
console.log(ninja)
})
observable.publish('Uchiha Shisui');
Web Workers
通過 Web Workers 進(jìn)行事件通信。
import Worky from 'worky'
const worker = new Worky("some-worker.js");
worker.on("eventName", function (some, data) {
// 處理
});
worker.emit("someEvent", and, some, data);
共享狀態(tài)
主應(yīng)用創(chuàng)建 state store，共享給子應(yīng)用使用，適用于主、子應(yīng)用技術(shù)棧相同的場景。
總結(jié)
微前端是一種將單個巨型應(yīng)用轉(zhuǎn)變?yōu)槎鄠€微型應(yīng)用聚合為一的應(yīng)用，能夠解決“巨石應(yīng)用”的維護(hù)性問題。實現(xiàn)微前端的方式有很多種，每種方案都需要考慮應(yīng)用隔離和應(yīng)用通信的問題，目前較為普遍使用的是組合式路由分發(fā)的方式。
參考
- 微前端(一)- 理念篇[4]
- 微前端-最容易看懂的微前端知識[5]
- 微前端在解決什么問題?[6]
- 微前端如何落地[7]
- 微前端解決方案[8]
- HTML Entry 源碼分析[9]
參考資料
[1]TECHNOLOGY RADAR:
https://www.thoughtworks.com/zh-cn/radar/techniques/micro-frontends
[2]import-html-entry:
https://www.npmjs.com/package/import-html-entry
[3]事件:
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
[4]微前端(一)- 理念篇:
https://www.lumin.tech/blog/micro-frontends-1-concept/
[5]微前端-最容易看懂的微前端知識:
https://juejin.cn/post/6844904162509979662
[6]微前端在解決什么問題?:
https://cloud.tencent.com/developer/article/1546556
[7]微前端如何落地:
https://www.infoq.cn/article/xm_aaiotxmlppgwvx9y9
[8]微前端解決方案:
https://segmentfault.com/a/1190000040275586
[9]HTML Entry 源碼分析:
https://juejin.cn/post/6885212507837825038#heading-6
網(wǎng)站名稱：一文帶你進(jìn)入微前端世界
文章分享：http://m.5511xx.com/article/djisecj.html
