介紹

MicroApp是由京東前端團(tuán)隊(duì)推出的一款微前端框架，它從組件化的思維，基于類(lèi)WebComponent進(jìn)行微前端的渲染，旨在降低上手難度、提升工作效率。MicroApp無(wú)關(guān)技術(shù)棧，也不和業(yè)務(wù)綁定，可以用于任何前端框架。

• 源碼地址： https://github.com/micro-zoe/micro-app
• 官網(wǎng)地址： https://micro-zoe.github.io/micro-app

微前端是一種頁(yè)面整合方案，它的核心在于將一個(gè)龐大的前端應(yīng)用拆分成多個(gè)獨(dú)立靈活的小型應(yīng)用，每個(gè)應(yīng)用都可以獨(dú)立開(kāi)發(fā)、獨(dú)立運(yùn)行、獨(dú)立部署，再將這些小型應(yīng)用融合為一個(gè)完整的應(yīng)用，或者將原本運(yùn)行已久、沒(méi)有關(guān)聯(lián)的幾個(gè)應(yīng)用融合為一個(gè)應(yīng)用。微前端既可以將多個(gè)項(xiàng)目融合為一，又可以減少項(xiàng)目之間的耦合，提升項(xiàng)目擴(kuò)展性，相比一整塊的前端倉(cāng)庫(kù)，微前端架構(gòu)下的前端倉(cāng)庫(kù)傾向于更小更靈活。

升級(jí)亮點(diǎn)

距離MicroApp開(kāi)源已經(jīng)有一年多時(shí)間，在這段時(shí)間里我們收到了很多問(wèn)題反饋，包括沙箱的性能、vite的兼容、路由沖突等等，為了解決這些問(wèn)題我們將很多核心功能進(jìn)行升級(jí)和重構(gòu)，經(jīng)過(guò)不斷的打磨和驗(yàn)證，最終推出MicroApp1.0正式版。

正式版的升級(jí)主要在以下幾個(gè)方面：

1. 更簡(jiǎn)潔的接入方式

2. 沙箱的性能

3. 虛擬路由系統(tǒng)

4. 樣式隔離

5. 兼容vite

6. 開(kāi)發(fā)工具

一行代碼嵌入

MicroApp借鑒了WebComponent的思想，通過(guò)CustomElement結(jié)合自定義的ShadowDom，將微前端封裝成一個(gè)類(lèi)WebComponent組件，實(shí)現(xiàn)微前端的組件化渲染。在此基礎(chǔ)上，通過(guò)實(shí)現(xiàn)JS隔離、樣式隔離、路由隔離，降低子應(yīng)用的接入成本，子應(yīng)用只需設(shè)置允許跨域請(qǐng)求，不需要改動(dòng)任何代碼即可接入微前端，使用方式和iframe幾乎一致，但卻沒(méi)有iframe存在的問(wèn)題。

接入方式如下：

JS沙箱的困境

在MicroApp開(kāi)源后我們收到社區(qū)的一些反饋，其中一條關(guān)于性能的問(wèn)題引起我們的重視。這不是MicroApp才存在的問(wèn)題，而是微前端長(zhǎng)久以來(lái)的難題，在社區(qū)有大量關(guān)于沙箱性能問(wèn)題的討論，卻始終沒(méi)有完美的解決方案。

MicroApp采用的是和qiankun一樣的proxy+with的沙箱方案，這也是目前js沙箱的主流方案 。with沙箱的功能非常完善，但是性能損耗卻非常明顯，在社區(qū)中也不乏對(duì)with沙箱性能問(wèn)題的討論，但一直沒(méi)有特別完美的解決方案，這是由于with改變了js的作用域鏈，從而產(chǎn)生大量的重復(fù)請(qǐng)求。問(wèn)題的根源是with，但又不全是with的問(wèn)題，準(zhǔn)確的說(shuō)是with和proxy兩者疊加造成的，with和proxy本質(zhì)上的性能都不高，需要一種方案避免對(duì)這兩個(gè)方法的頻繁讀取操作，MicroApp采用的解決方案是變量前置和異步防抖。

? 變量前置：是指使用Object.defineProperty定義全局變量，通過(guò)get和set設(shè)置響應(yīng)數(shù)據(jù)，一是為了避免在proxy的get中進(jìn)行多余的操作，二是defineProperty的性能比proxy更優(yōu)秀 。

? 異步防抖：是指在子應(yīng)用運(yùn)行時(shí)對(duì)promise進(jìn)行標(biāo)記，確保在上一個(gè)promise執(zhí)行完成之后才會(huì)進(jìn)入下一個(gè)，避免并行觸發(fā)，防止promise被頻繁觸發(fā)會(huì)造成性能損失。

在此基礎(chǔ)上，MicroApp沙箱還提供了快照、緩存、預(yù)加載等功能，在保證功能不變的前提下，徹底解決沙箱的性能問(wèn)題，升級(jí)后的沙箱運(yùn)行效率媲美原生JS。

虛擬路由系統(tǒng)

微前端是將多個(gè)不同的web應(yīng)用融合在一起渲染，但瀏覽器只有一個(gè)路由系統(tǒng)，這很容易造成應(yīng)用之間的路由沖突，最常見(jiàn)的就是vue3的路由沖突問(wèn)題。

上面是vue-router作者對(duì)于在微前端環(huán)境下的沖突問(wèn)題的回答，他認(rèn)為vue-router已經(jīng)覆蓋足夠多場(chǎng)景，微前端的問(wèn)題應(yīng)該由微前端解決。

在我們剛開(kāi)源時(shí)，并沒(méi)有對(duì)路由進(jìn)行隔離，用戶(hù)對(duì)于MicroApp的問(wèn)題幾乎一半都和路由相關(guān)，因?yàn)橐粋€(gè)路由系統(tǒng)同時(shí)滿(mǎn)足多個(gè)應(yīng)用的渲染容易導(dǎo)致沖突，也非常反直覺(jué)和難以理解，于是我們推出了虛擬路由系統(tǒng)。

概念圖：

虛擬路由系統(tǒng)與瀏覽器的路由行為一致，它通過(guò)自定義location和history等核心路由API，重寫(xiě)了popState和hashChange事件，攔截路由導(dǎo)航和事件，并提供了一系列自定義API，模擬了在瀏覽器環(huán)境下的Web應(yīng)用程序的渲染、跳轉(zhuǎn)和返回等路由行為。子應(yīng)用程序在這個(gè)虛擬路由系統(tǒng)中運(yùn)行，與基座應(yīng)用程序的路由相互隔離，從而避免相互影響，并增強(qiáng)了子應(yīng)用程序與基座應(yīng)用程序之間的交互能力。通過(guò)虛擬路由系統(tǒng)，基座應(yīng)用程序可以方便地獲取子應(yīng)用程序的路由信息并控制子應(yīng)用程序的跳轉(zhuǎn)，子應(yīng)用程序的路由信息會(huì)作為參數(shù)同步到瀏覽器地址上。此外，虛擬路由系統(tǒng)還提供了許多功能，幫助開(kāi)發(fā)人員提高工作效率。

樣式隔離方案升級(jí)

MicroApp最初是基于style元素的CSSStyleSheet實(shí)現(xiàn)的樣式隔離：即將CSS字符串插入style元素生成CSSStyleSheet，遍歷每個(gè)CSS規(guī)則，添加前綴實(shí)現(xiàn)樣式隔離。

這種一種取巧的方式，利用瀏覽器自身的能力格式化CSS，并在此基礎(chǔ)上進(jìn)行修改，省去很多工作量。但問(wèn)題也出現(xiàn)在這里，不同瀏覽器對(duì)于相同的CSS生成的CSSStyleSheet可能會(huì)不同，這就導(dǎo)致我們?cè)谔幚鞢SSStyleSheet會(huì)遇到不可以預(yù)知的問(wèn)題，導(dǎo)致CSS表現(xiàn)不一致。

于是MicroApp換了一種方式來(lái)實(shí)現(xiàn)樣式隔離，我們使用正則將CSS字符串切割成最小單元，每個(gè)單元包含一段CSS信息，將所有的信息整理生成CSSTree，遍歷CSSTree的每個(gè)規(guī)則，添加前綴實(shí)現(xiàn)樣式隔離。

新的方案不但抹平了不同平臺(tái)間的差異，在性能上相較于舊版普遍提升30%以上，并且擁有更加靈活的配置：

/* 對(duì)指定的選擇器禁用樣式隔離 *
/*! scopecss-disable .test1, .test2 */
.test1 {color: red;
}
.test2 {color: yellow;
}
.test3 {/* 在某一行中禁用樣式隔離 *//*! scopecss-disable-next-line */background: url(/test.png);
}

vite的兼容

在之前的版本中，MicroApp也支持vite的接入，但必須關(guān)閉沙箱，因?yàn)関ite打包出來(lái)的是esm類(lèi)型的js文件，而esm無(wú)法運(yùn)行在with環(huán)境中，但這樣容易導(dǎo)致基座和子應(yīng)用之間的沖突，顯然是需要進(jìn)一步優(yōu)化的。

為此我們?yōu)関ite（更準(zhǔn)確的說(shuō)是為esm類(lèi)型的項(xiàng)目）開(kāi)發(fā)了一套iframe沙箱方案，將esm類(lèi)型的js文件放入iframe中運(yùn)行，并通過(guò)重寫(xiě)子應(yīng)用底層原型鏈的方式，實(shí)現(xiàn)對(duì)js和元素的攔截和處理。

iframe沙箱和with沙箱的實(shí)現(xiàn)方式不同，功能也略有不同，with沙箱擁有更加靈活的操作，而iframe沙箱擁有更加嚴(yán)格的隔離環(huán)境，兩者各有優(yōu)劣。用戶(hù)可以在兩種沙箱之間靈活切換，以滿(mǎn)足更多特殊場(chǎng)景的覆蓋和兼容。

Micro-App-DevTools

Micro-App-DevTools 是基于 MicroApp 推出的一款Chrome瀏覽器插件，目的是為了在開(kāi)發(fā)和使用 MicroApp 過(guò)程中提高效率。通過(guò)此插件可以有效的解決調(diào)試?yán)щy、模擬數(shù)據(jù)通信、查看視窗范圍、設(shè)置路由、獲取環(huán)境變量等訴求，進(jìn)而更好地幫助用戶(hù)去了解和使用 MicroApp。

方案詳解

Micro-App-DevTools通過(guò)模擬子應(yīng)用開(kāi)發(fā)環(huán)境，獲取父應(yīng)用數(shù)據(jù)，來(lái)可視化查看通訊數(shù)據(jù)，提高開(kāi)發(fā)調(diào)試效率。對(duì)于路由，將會(huì)顯示所有應(yīng)用的路由，包含層層嵌套應(yīng)用以及一個(gè)父應(yīng)用多個(gè)子應(yīng)用的路由，使不同團(tuán)隊(duì)?wèi)?yīng)用也能快速定位自己?jiǎn)栴}，方便協(xié)作。還提供了全局變量和高亮視窗功能，實(shí)現(xiàn)快速定位范圍，提高排查效率的功能，并集結(jié)了圖標(biāo)、右鍵、控制臺(tái)的快捷進(jìn)入方式，使用戶(hù)快速上手，零成本使用。

總結(jié)

MicroApp 1.0已經(jīng)發(fā)布，我們將積極回應(yīng)開(kāi)發(fā)者的問(wèn)題和反饋，并持續(xù)改進(jìn)，以幫助更多開(kāi)發(fā)者提高效率和改善開(kāi)發(fā)體驗(yàn)。歡迎大家使用MicroApp并參與共建，也希望在GitHub上給我們點(diǎn)個(gè)Star來(lái)支持我們~

MicroApp Github地址：

https://github.com/micro-zoe/micro-app

Micro-App-DevTools Github地址：

https://github.com/micro-zoe/micro-app-chrome-plugin

MicroApp官網(wǎng)地址：

https://micro-zoe.github.io/micro-app

作者：京東零售 馬國(guó)華

來(lái)源：京東云開(kāi)發(fā)者社區(qū) 轉(zhuǎn)載請(qǐng)注明來(lái)源