1.微前端解決方案

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

2.微前端指的什么

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

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

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

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

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

5.微前端的好處和缺陷

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

6.微前端作用

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

7.微前端埃及旅游景點的原理

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

8.微前端項目

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

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

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

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

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

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

的最終效果：

Kapture 2023-01-29 at 23.57.17.gif

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

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

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

image.pngGateway Worker所有流量的入口是一個 gateway worker，gateway worker 的作用是用來分發(fā)流量，包括穩(wěn)定流量、靜態(tài)資源流量等本質(zhì)就是一個實現(xiàn)了 fetch 的 Cl埃及旅游景點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埃及旅游景點e)returnfragmentResponse

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

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

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

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

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

{asyncfunc埃及旅游景點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埃及旅游景點

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

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

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

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

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

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

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

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