3.5 微前端架構(gòu)

3.5.1 微前端的定義

微前端這個(gè)術(shù)語最初來自ThoughtWorks。與微服務(wù)的產(chǎn)生背景一致，也出現(xiàn)了大型且雜亂無章的前端單體應(yīng)用（monolith），難以維護(hù)和發(fā)展，解決方案是微前端架構(gòu)。微前端是指多個(gè)按頁面和功能劃分的前端技術(shù)團(tuán)隊(duì)，使用不同的技術(shù)體系，將遺留的和新建的各種應(yīng)用頁面聚合展現(xiàn)給用戶，每個(gè)子應(yīng)用可以獨(dú)立開發(fā)、測試和部署。見https://www.thoughtworks.com/radar/techniques/micro-frontends。

3.5.2 微前端的作用

■ 人員和技術(shù)獨(dú)立演進(jìn)：不同的團(tuán)隊(duì)，獨(dú)立的技術(shù)體系，分別構(gòu)建，各自演進(jìn)。解決了巨大的前端單體應(yīng)用開發(fā)效率低下、構(gòu)建速度慢的問題。

■ 聚合新舊各種前端應(yīng)用：聚合不同業(yè)務(wù)和技術(shù)體系的前端應(yīng)用，尤其是解決遺留系統(tǒng)問題，新模塊可以使用最新的框架和技術(shù)，保留舊系統(tǒng)繼續(xù)發(fā)揮作用。

3.5.3 技術(shù)發(fā)展路線

在前后端未分離的時(shí)代，實(shí)現(xiàn)類似微前端作用的技術(shù)是Portal與Portlet，典型的實(shí)現(xiàn)如Liferay。Portal是一種Web應(yīng)用，用來將不同信息源的內(nèi)容集成到一個(gè)Web頁面里，提供個(gè)性化的內(nèi)容和個(gè)性化的風(fēng)格展示。頁面上每個(gè)不同的信息源就是一個(gè)Portlet。Portlet是一個(gè)服務(wù)端實(shí)現(xiàn)的架構(gòu)，按JSR168規(guī)范實(shí)現(xiàn)異構(gòu)獨(dú)立開發(fā)，每個(gè)Portlet對接不同的信息源并將返回內(nèi)容在Portal頁面中顯示，Portal Web頁面由一個(gè)個(gè)Portlet組成。移動(dòng)互聯(lián)網(wǎng)時(shí)代，Portlet技術(shù)無法適應(yīng)前后端分離的要求，所以出現(xiàn)了微前端技術(shù)。

3.5.4 微前端的特點(diǎn)

一個(gè)完善的微前端應(yīng)具備如下特點(diǎn)：

■ 子應(yīng)用技術(shù)無關(guān)。技術(shù)框架無關(guān)，各子應(yīng)用可以使用不同種類的框架，不同種類的框架共存，如AngularJS、React.js和Vue框架并存。框架版本無關(guān)，同一種框架的不同版本可以共存，不會(huì)出現(xiàn)死鎖崩潰。

■ 子應(yīng)用工程自治。子應(yīng)用在開發(fā)、發(fā)布及部署上相互獨(dú)立，不存在依賴關(guān)系。

■ 子應(yīng)用運(yùn)行時(shí)隔離。子應(yīng)用運(yùn)行時(shí)樣式隔離，避免CSS相互污染；運(yùn)行時(shí)DOM隔離，避免變量沖突，JS操作非自身領(lǐng)域的對象；運(yùn)行時(shí)異常隔離，避免問題互相傳遞、互相影響。

■ 子應(yīng)用動(dòng)態(tài)組合。子應(yīng)用可以自由組合，對用戶提供統(tǒng)一的樣式與用戶體驗(yàn)。子應(yīng)用遵循標(biāo)準(zhǔn)規(guī)范的生命周期；子應(yīng)用通過路由映射和數(shù)據(jù)共享互相訪問并實(shí)現(xiàn)父子嵌套關(guān)系。

3.5.5 微前端的技術(shù)架構(gòu)

典型的微前端架構(gòu)如圖3-9所示。微前端架構(gòu)應(yīng)包括如下幾部分。

（1）構(gòu)建打包：支持微前端插拔式打包，微前端的插拔不需要對整體重新打包發(fā)布。

（2）生命周期：將微前端注冊到主體，運(yùn)行時(shí)按需加載和卸載。

（3）運(yùn)行沙箱：提供微前端的運(yùn)行環(huán)境并隔離DOM操作和CSS樣式。

（4）路由分發(fā)：導(dǎo)航到各個(gè)微前端，路由前保證微前端預(yù)加載。

（5）消息總線：各組成部分通過消息總線分發(fā)事件、共享數(shù)據(jù)。

（6）觀察監(jiān)控：觀察運(yùn)行時(shí)狀態(tài)，監(jiān)控健康指標(biāo)、告警和閾值。

微前端技術(shù)方興未艾，滿足微前端的全部特點(diǎn)要求充滿了挑戰(zhàn)，目前典型解決方案是single-spa。