1.微前端解決方案

編者按：本文作者是螞蟻集團(tuán)前端工程師有知，介紹了 Cloudflare 提出的一種「新的」微前端方案以及其極致的首屏優(yōu)化背后的實(shí)現(xiàn)原理。

2.微前端指的什么

image.pngPS：關(guān)注過(guò) Angular 的同學(xué)應(yīng)該對(duì) Igor Minar 這個(gè)名字不陌生，他是 AngularJS/Angular 的 co-founder 之一，并長(zhǎng)期擔(dān)任 Angular Team 的 Tech L埃及旅游景點(diǎn)eader 負(fù)責(zé) Angular 團(tuán)隊(duì)的整體運(yùn)轉(zhuǎn)，2021 年 11 月離開(kāi)了工作 12 年的 Google 去了 Cloudflare。

3.微前端架構(gòu)是什么

本文主要為大家介紹下 Cloudflare 提出的一種「新的」微前端方案以及其極致的首屏優(yōu)化背后的實(shí)現(xiàn)原理，有興趣的同學(xué)也可以直接去看 Cloudflare 的原文： Cloudflare Workers 和微前端：為彼此而生

4.微前端qiankun官網(wǎng)

https://blog.cloudflare.com/zh-cn/better-micro-frontends-zh-cn/ 通過(guò) Cloudflare Workers 增加采用微前端 埃及旅游景點(diǎn)https://

5.微前端的好處和缺陷

blog.cloudflare.com/zh-cn/fragment-piercing-zh-cn/客戶端微前端方案的問(wèn)題文章中首先指出了當(dāng)前常見(jiàn)的客戶端微前端方案的問(wèn)題：Module Federation：共享庫(kù)本身不能與微應(yīng)用一起做構(gòu)建時(shí) tree-shaking。

6.微前端作用

Module Federation：共享庫(kù)本身會(huì)帶來(lái)隱式的耦合，版本升級(jí)會(huì)變得非常麻煩這也是 qiankun 不推薦用 externals 的方式來(lái)復(fù)用依賴的原因瀑布式請(qǐng)求：必須等頂層的主應(yīng)用啟動(dòng)之后，才能開(kāi)始啟動(dòng)微應(yīng)用，微應(yīng)用才能發(fā)起請(qǐng)求，導(dǎo)致運(yùn)行時(shí)間進(jìn)一步被延時(shí)。

7.微前端埃及旅游景點(diǎn)的原理

這個(gè)是微前端方案首屏慢的最根本原因hydration delay：即便我們加上了服務(wù)端渲染（SSR），用戶的首屏雖然快了，但仍然需要等待客戶端框架完成 hydration 之后才能開(kāi)始交互Cloudflare 的片段架構(gòu)（Fragments Architecture）。

8.微前端項(xiàng)目

為解決這些問(wèn)題，Cloudflare 提出了他們針對(duì)微前端的片段架構(gòu)：

9.微前端優(yōu)缺點(diǎn)

image.png 整個(gè)渲染流里有幾個(gè)關(guān)鍵要素：應(yīng)用程序由一顆片段樹(shù)組成瀏覽器向根片段發(fā)起請(qǐng)求，根片段與子片段通信，生成最終響應(yīng)每個(gè)片段運(yùn)行在獨(dú)立的 worker 中整個(gè)響應(yīng)過(guò)程都是 并行 + 流式的優(yōu)勢(shì)

10.微前端實(shí)現(xiàn)方式埃及旅游景點(diǎn)以及代碼

片段架構(gòu)的主要優(yōu)勢(shì)有這些：安全性：前置的關(guān)鍵接口請(qǐng)求都是在服務(wù)端 worker 中進(jìn)行，不用擔(dān)心前端敏感代碼泄露的問(wèn)題基于 Worker 的服務(wù)端渲染：SSR + CDN 加持，Lighthouse 評(píng)分極高

盡早交互（Eager interactivity）：不用等框架走完 hydration 流程，響應(yīng)回來(lái)瀏覽器渲染開(kāi)始就能開(kāi)始交互（實(shí)際需要框架配合，比如 demo 里的 Qwik）實(shí)現(xiàn)原理先看下 Demo

的最終效果：

Kapture 2023-01-29 at 23.57.17.gif

Kapture 2023-01-29 at 23.41.57.gif 這里面有幾點(diǎn)特性值得關(guān)注：首屏埃及旅游景點(diǎn)會(huì)首先返回頁(yè)面的 critical 部分內(nèi)容，且渲染出來(lái)是可以立即交互的比如 Login 頁(yè)面的中間表單部分，Todos 頁(yè)面的列表部分。

所有的渲染都是流式的，包括客戶端路由切換引發(fā)的重新渲染整體架構(gòu)如下圖，本文將會(huì)通過(guò)問(wèn)題來(lái)解構(gòu)，看看 Cloudflare 是如何基于 Worker 來(lái)實(shí)現(xiàn)更優(yōu)異性能表現(xiàn)的微前端的。

image.png Demo 源碼: 1. 如何實(shí)現(xiàn)流式聚合響應(yīng)

image.pngGateway Worker所有流量的入口是一個(gè) gateway worker，gateway worker 的作用是用來(lái)分發(fā)流量，包括穩(wěn)定流量、靜態(tài)資源流量等本質(zhì)就是一個(gè)實(shí)現(xiàn)了 fetch 的 Cl埃及旅游景點(diǎn)oudflare Worker。

fetch=async(request:Request,env:Env,ctx:ExecutionContext):Promise=>{this.validateFragmentConfigs

(env);request=awaitthis.createSSRMessageBusAndUpdateRequest(request,env,ctx);// 分發(fā) Fragment 靜態(tài)資源 const

fragmentResponse=awaitthis.handleFragmentFetch(request,env);if(fragmentRespons埃及旅游景點(diǎn)e)returnfragmentResponse

;constfragmentAssetResponse=awaitthis.handleFragmentAssetFetch(request,env);if(fragmentAssetResponse)

returnfragmentAssetResponse;// 聚合流式響應(yīng) consthtmlResponse=awaitthis.handleHtmlRequest(request,env,ctx);

if(htmlResponse)returnhtmlResponse;returnthis.forwardFetchToBaseAp埃及旅游景點(diǎn)p(request,env);};重點(diǎn)是 handleHtmlRequest 這里，這里會(huì)將當(dāng)前訪問(wèn) url 需要的 Fragments 流聚合成一個(gè)流：

// 聚合 legacy index.html 和 Fragments html returnthis.returnCombinedIndexPage(indexBody,concatenateStreams

(fragmentStreamsToInclude));exportfunctionconcatenateStreams(streams:ReadableStream[]):ReadableStream

{asyncfunc埃及旅游景點(diǎn)tionwriteStreams(writer:WritableStreamDefaultWriter):Promise{try{for(conststreamofstreams

){constreader=stream.getReader();letchunk=awaitreader.read();while(!chunk.done){writer.write(chunk.value

);chunk=awaitreader.read();}}writer.close();}catch(error:any){writer.abort(error);}}const{writable,readable埃及旅游景點(diǎn)

}=newTransformStream();constwriter=writable.getWriter();writeStreams(writer);returnreadable;}只需要確保 legacy index.html 是第一個(gè)響應(yīng)，其他 Fragments 流的順序無(wú)所謂。

最后出來(lái)的響應(yīng)：

image.png 每個(gè) Fragment 由 piercing-fragment-host 標(biāo)簽包裹，每個(gè)標(biāo)簽內(nèi)都是一個(gè)完整的 HTML 字符串（含 head、body 部分） 有似曾相識(shí)的感覺(jué)嗎？2. 如何確保先渲染的 Fragment 流能渲染到正確的位置

這個(gè)主要作用是將首屏最先需要交互埃及旅游景點(diǎn)的片段渲染出來(lái)，并渲染到正確的位置，比如一個(gè) Login 頁(yè)面的中間表單部分而不是按照完整的頁(yè)面結(jié)構(gòu)渲染 總共分兩步：原始渲染的 Fragment 本身就是包含 UI 且可響應(yīng)的（借助 Qwik），本身由。

piercing-fragment-host 這個(gè)統(tǒng)一的 web component 負(fù)責(zé)組件激活每一個(gè) Fragment 在注冊(cè)之初便有基礎(chǔ)樣式，這些基礎(chǔ)樣式用于確保首屏的 Fragment 在客戶端 hydration 之后不會(huì)出現(xiàn)視覺(jué)閃爍或者失焦。

Legacy App 會(huì)后置渲染出piercing-fragment-outlet組件，當(dāng)組件激活后，會(huì)將對(duì)應(yīng)的piercing-fragm埃及旅游景點(diǎn)ent-host移動(dòng)到 outlet 對(duì)應(yīng)的 DOM 樹(shù)里片段穿孔

片段穿孔指的便是上述的兩步流程，作用就是如何將新的 Fragment 動(dòng)態(tài)的整合到 Legacy 應(yīng)用中其中有兩個(gè)重要的 web component 組件，piercing-fragment-host和

piercing-fragment-outletpiercing-fragment-hostFragment 整個(gè) HTML 的片段宿主，如首屏響應(yīng)可能長(zhǎng)這樣：