一文帶你進(jìn)入微前端世界

作者：Gopal 2022-05-31 08:01:53

微前端架構(gòu)旨在解決單體應(yīng)用在一個(gè)相對(duì)長的時(shí)間跨度下，由于參與的人員、團(tuán)隊(duì)的增多、變遷，從一個(gè)普通應(yīng)用演變成一個(gè)巨石應(yīng)用(Frontend Monolith)后，隨之而來的應(yīng)用不可維護(hù)的問題。

什么是微前端

微前端(Micro-Frontends)是一種類似于微服務(wù)的架構(gòu)，它將微服務(wù)的理念應(yīng)用于瀏覽器端，即將 Web 應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)槎鄠€(gè)小型前端應(yīng)用聚合為一的應(yīng)用。微前端(micro-frontends)術(shù)語在 2016 年在 TECHNOLOGY RADAR[1] 中被提及。

微前端架構(gòu)具備以下的特點(diǎn)：

技術(shù)棧無關(guān)。主框架不限制接入應(yīng)用的技術(shù)棧，微應(yīng)用具備完全自主權(quán)
獨(dú)立開發(fā)、獨(dú)立部署。微應(yīng)用倉庫獨(dú)立，前后端可獨(dú)立開發(fā)，部署完成后主框架自動(dòng)完成同步更新
增量升級(jí)。在面對(duì)各種復(fù)雜場景時(shí)，我們通常很難對(duì)一個(gè)已經(jīng)存在的系統(tǒng)做全量的技術(shù)棧升級(jí)或重構(gòu)，而微前端是一種非常好的實(shí)施漸進(jìn)式重構(gòu)的手段和策略
獨(dú)立運(yùn)行時(shí)。每個(gè)微應(yīng)用之間狀態(tài)隔離，運(yùn)行時(shí)狀態(tài)不共享

微前端解決了什么問題?

原本一個(gè)團(tuán)隊(duì)管理的項(xiàng)目，后面多個(gè)團(tuán)隊(duì)進(jìn)行管理
隨著項(xiàng)目的體積變大，編譯的速度變長，研發(fā)效率降低
項(xiàng)目變大，系統(tǒng)的復(fù)雜度也會(huì)隨之變大，可維護(hù)性越來越低，重構(gòu)成本越來越大
...

通過微前端拆分成一個(gè)容器應(yīng)用和多個(gè)子應(yīng)用之后，各個(gè)應(yīng)用能夠獨(dú)立部署，相互之間隔離，從而做到：

研發(fā)效率提升：多業(yè)務(wù)線并行開發(fā)，團(tuán)隊(duì)自治，獨(dú)立迭代
運(yùn)維風(fēng)險(xiǎn)降級(jí)：變更范圍縮小
技術(shù)選擇增多：各個(gè)應(yīng)用可以選擇更加適合自身的技術(shù)棧
重構(gòu)風(fēng)險(xiǎn)降低：低風(fēng)險(xiǎn)局部替換，漸進(jìn)式完成大規(guī)模重構(gòu)
...

微前端實(shí)現(xiàn)方案

對(duì)比Nginx路由轉(zhuǎn)發(fā)

通過Nginx配置反向代理來實(shí)現(xiàn)不同路徑映射到不同應(yīng)用，例如www.abc.com/app1對(duì)應(yīng)app1，www.abc.com/app2對(duì)應(yīng)app2，這種方案本身并不屬于前端層面的改造，更多的是運(yùn)維的配置。

優(yōu)點(diǎn)：

簡單，快速，易配置

缺點(diǎn)：

在切換應(yīng)用時(shí)會(huì)觸發(fā)瀏覽器刷新，影響體驗(yàn)

iframe嵌套

父應(yīng)用單獨(dú)是一個(gè)頁面，每個(gè)子應(yīng)用嵌套一個(gè)iframe，父子通信可采用postMessage或者contentWindow方式。

優(yōu)點(diǎn)：

實(shí)現(xiàn)簡單，子應(yīng)用之間自帶沙箱，天然隔離，互不影響

缺點(diǎn)：

url 不同步。瀏覽器刷新 iframe url 狀態(tài)丟失、后退前進(jìn)按鈕無法使用。
UI 不同步，DOM 結(jié)構(gòu)不共享。想象一下屏幕右下角 1/4 的 iframe 里來一個(gè)帶遮罩層的彈框，同時(shí)我們要求這個(gè)彈框要瀏覽器居中顯示，還要瀏覽器 resize 時(shí)自動(dòng)居中..
全局上下文完全隔離，內(nèi)存變量不共享。iframe 內(nèi)外系統(tǒng)的通信、數(shù)據(jù)同步等需求，主應(yīng)用的 cookie 要透傳到根域名都不同的子應(yīng)用中實(shí)現(xiàn)免登效果。
慢。每次子應(yīng)用進(jìn)入都是一次瀏覽器上下文重建、資源重新加載的過程。

Web Components

每個(gè)子應(yīng)用需要采用純Web Components技術(shù)編寫組件，是一套全新的開發(fā)模式

優(yōu)點(diǎn)：

每個(gè)子應(yīng)用擁有獨(dú)立的script和css，也可單獨(dú)部署

缺點(diǎn)：

對(duì)于歷史系統(tǒng)改造成本高，子應(yīng)用通信較為復(fù)雜易踩坑

webpack5 的 Module Federation

使用 Module Federation，我們可以在一個(gè)應(yīng)用中動(dòng)態(tài)加載并執(zhí)行另一個(gè)應(yīng)用的代碼，且與技術(shù)棧無關(guān)，并且能夠共享模塊，從而減小編譯時(shí)間以及降低包體積。

優(yōu)點(diǎn)：

能夠共享模塊，減小編譯時(shí)間以及降低包體積

缺點(diǎn)：

需要升級(jí) webpack5，構(gòu)建工具受限

組合式應(yīng)用路由分發(fā)

每個(gè)子應(yīng)用獨(dú)立構(gòu)建和部署，運(yùn)行時(shí)由父應(yīng)用來進(jìn)行路由管理，應(yīng)用加載，啟動(dòng)，卸載，以及通信機(jī)制。

優(yōu)點(diǎn)：

純前端改造，體驗(yàn)良好，可無感知切換，子應(yīng)用相互隔離

缺點(diǎn)：

需要設(shè)計(jì)和開發(fā)，由于父子應(yīng)用處于同一頁面運(yùn)行，需要解決子應(yīng)用的樣式?jīng)_突，變量對(duì)象污染，通信機(jī)制等技術(shù)點(diǎn)

組合式應(yīng)用路由分發(fā)是目前業(yè)內(nèi)普遍使用的一種方案，并且能夠滿足大部分需求，接下來我們?cè)敿?xì)來看看這種實(shí)現(xiàn)方式。

組合式應(yīng)用路由分發(fā)的微前端實(shí)現(xiàn)思路

該方案使用的是基座模式，通過一個(gè)主應(yīng)用(基座應(yīng)用-Main APP)，來管理其它應(yīng)用(子應(yīng)用-MicroAPP)。基座應(yīng)用大多數(shù)是一個(gè)前端 SPA 項(xiàng)目，主要負(fù)責(zé)應(yīng)用注冊(cè)，路由映射，消息下發(fā)等，而微應(yīng)用是獨(dú)立前端項(xiàng)目，這些項(xiàng)目不限于采用 React，Vue，Angular 或者 JQuery 開發(fā)，每個(gè)微應(yīng)用注冊(cè)到基座應(yīng)用中，由基座進(jìn)行管理，但是如果脫離基座也是可以單獨(dú)訪問。

當(dāng)整個(gè)微前端框架運(yùn)行之后，給用戶的體驗(yàn)就是類似下圖所示：

簡單描述下就是基座應(yīng)用中有一些菜單項(xiàng)，點(diǎn)擊每個(gè)菜單項(xiàng)可以展示對(duì)應(yīng)的微應(yīng)用，這些應(yīng)用的切換是純前端無感知的

上面的實(shí)現(xiàn)過程主要如下：

獲取注冊(cè)表和進(jìn)行初始化，這些都是在基座應(yīng)用中進(jìn)行的。
路由分發(fā)。在瀏覽器路徑發(fā)生變化后，基座應(yīng)用會(huì)監(jiān)聽 hashchange 或者 popstate 事件，從而獲取到路由切換的時(shí)機(jī)。通過查詢注冊(cè)信息可以獲取到轉(zhuǎn)發(fā)到那個(gè)微應(yīng)用，經(jīng)過一些邏輯處理后，采用修改hash方法或者pushState方法來路由信息推送給微應(yīng)用的路由，微應(yīng)用可以是手動(dòng)監(jiān)聽hashchange或者popstate事件接收，或者采用React-router，vue-router接管路由，后面的邏輯就由微應(yīng)用自己控制。
遠(yuǎn)程拉取資源，加載應(yīng)用。這里一般有通過 JavaScript Entry 或者 HTML Entry 作為渲染入口。

注意：子應(yīng)用也可以將包打成多個(gè)，然后利用 webpack 的 webpack-manifest-plugin 插件打包出 manifest.json
文件，生成一份資源清單，然后主應(yīng)用的 loadApp 遠(yuǎn)程讀取每個(gè)子應(yīng)用的清單文件，依次加載文件里面的資源;不過該方案也沒辦法享受子應(yīng)用的按需加載能力。

HTML Entry。則更加靈活，直接將子應(yīng)用打出來 HTML 作為入口，主框架可以通過 fetch html 的方式獲取子應(yīng)用的靜態(tài)資源，同時(shí)將 HTML document 作為子節(jié)點(diǎn)塞到主框架的容器中。這樣不僅可以極大的減少主應(yīng)用的接入成本，子應(yīng)用的開發(fā)方式及打包方式基本上也不需要調(diào)整，而且可以天然的解決子應(yīng)用之間樣式隔離的問題(后面提到)。這種方案可以通過。
JavaScript Entry。通常是子應(yīng)用將資源打成一個(gè) entry script。但這個(gè)方案的限制也頗多，如要求子應(yīng)用的所有資源打包到一個(gè) js bundle 里，包括 css、圖片等資源。除了打出來的包可能體積龐大之外的問題之外，資源的并行加載等特性也無法利用上。

微前端的應(yīng)用隔離

CSS 隔離

當(dāng)主應(yīng)用和微應(yīng)用同屏渲染時(shí)，就可能會(huì)有一些樣式會(huì)相互污染，可以采取以下兩種方案：

CSS Module
命名空間，通過 webpack 的 postcss 插件，在打包時(shí)添加特定的前綴，即各個(gè)子應(yīng)用使用特定的前綴來命名 class。但對(duì)于一些插入到 body 中的樣式，比如 element UI 的 Popover 彈出框，這種就特殊處理。

而對(duì)于微應(yīng)用與微應(yīng)用之間的CSS隔離就非常簡單，在每次應(yīng)用加載時(shí)，將該應(yīng)用所有的link和style 內(nèi)容進(jìn)行標(biāo)記。在應(yīng)用卸載后，同步卸載頁面上對(duì)應(yīng)的link和style即可。

JavaScript 隔離

每當(dāng)微應(yīng)用的 JavaScript 被加載并運(yùn)行時(shí)，它的核心實(shí)際上是對(duì)全局對(duì)象 Window 的修改以及一些全局事件的改變，例如 jQuery 這個(gè) js 運(yùn)行后，會(huì)在 Window 上掛載一個(gè) window.$ 對(duì)象，對(duì)于其他庫 React，Vue 也不例外。為此，需要在加載和卸載每個(gè)微應(yīng)用的同時(shí)，盡可能消除這種沖突和影響，最普遍的做法是采用沙箱機(jī)制(SandBox)。

沙箱機(jī)制的核心是讓局部的 JavaScript 運(yùn)行時(shí)，對(duì)外部對(duì)象的訪問和修改處在可控的范圍內(nèi)，即無論內(nèi)部怎么運(yùn)行，都不會(huì)影響外部的對(duì)象。通常在 Node.js 端可以采用 vm 模塊，而對(duì)于瀏覽器，則需要結(jié)合 with 關(guān)鍵字和 window.Proxy 對(duì)象來實(shí)現(xiàn)瀏覽器端的沙箱。

微前端的消息通信

微前端通常不會(huì)限制應(yīng)用采用的框架，如何在不同的應(yīng)用，框架之間進(jìn)行通信是一個(gè)需要仔細(xì)考量的決定。應(yīng)用間通信有很多種方式，當(dāng)然，要讓多個(gè)分離的微應(yīng)用之間要做到通信，本質(zhì)上仍離不開中間媒介或者說全局對(duì)象。

自定義事件

通過事件[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)用中會(huì)定義事件中心Event，每個(gè)微應(yīng)用分別來注冊(cè)事件，當(dāng)被觸發(fā)事件時(shí)再有事件中心統(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é)

微前端是一種將單個(gè)巨型應(yīng)用轉(zhuǎn)變?yōu)槎鄠€(gè)微型應(yīng)用聚合為一的應(yīng)用，能夠解決“巨石應(yīng)用”的維護(hù)性問題。實(shí)現(xiàn)微前端的方式有很多種，每種方案都需要考慮應(yīng)用隔離和應(yīng)用通信的問題，目前較為普遍使用的是組合式路由分發(fā)的方式。