原文作者: Wael Kdouh
原文鏈接：https://medium.com/@waelkdouh/microfrontends-with-blazor-webassembly-b25e4ba3f325

我聊下最近我在做的事情，然后分享下在Blazor WebAssembly 微前端的實(shí)現(xiàn)細(xì)節(jié)，這篇文章是我的一些心得，以及一個(gè)示例的 Demo 項(xiàng)目，展示了如何使用Blazor 實(shí)現(xiàn)多模塊分布式的應(yīng)用程序的微前端，如下圖所示。

為了實(shí)現(xiàn)上面的架構(gòu)，這是我使用到了.NET 5 對(duì)與 Blazor WebAssembly 的一項(xiàng)新功能，延遲加載，直到需要這些程序集的時(shí)候，才開始加載，從而提高Blazor WebAssembly應(yīng)用程序的啟動(dòng)性能，比如如，只有用戶導(dǎo)航到該組件時(shí)，才開始加載單個(gè)組件的程序集，加載后，程序集將緩存在客戶端，可用于以后的所有導(dǎo)航。

我的示例項(xiàng)目的結(jié)構(gòu)是下邊這樣

Blazor 的延遲加載功能允許標(biāo)記應(yīng)用程序集，當(dāng)用戶導(dǎo)航到特定路由時(shí)，才開始加載程序集，這個(gè)功能包括修改程序路由時(shí)修改項(xiàng)目文件。

打開我們的 Blazor 項(xiàng)目，然后修改項(xiàng)目 .csproj 文件，在這里標(biāo)記需要延遲加載的 dll 類型的程序集，然后 Blazor 啟動(dòng)后就不會(huì)加載這個(gè)程序集，我下邊的代碼中標(biāo)記了 WaelsMagicFeature.dll 用于延遲加載，如果設(shè)置的程序集有其他的依賴，也需要把依賴程序集設(shè)置延遲加載。

Blazor 的路由組件指定搜索可以訪問的路由組件的程序集，當(dāng)用戶訪問到路由菜單，路由組件也負(fù)責(zé)渲染，在應(yīng)用的路由組件(App.razor) 添加一個(gè)?OnNavigateAsync?的回調(diào)，當(dāng)用戶第一次直接從瀏覽器導(dǎo)航到路由時(shí)，OnNavigateAsync 被調(diào)用執(zhí)行，如果延遲加載的程序集包含了可路由的組件，添加一個(gè)?List<Assembly>,如果程序集包含可路由的組件，則將程序集傳遞回 AdditionalAssemblies 集合，框架在程序集中搜索路線，并在找到任何新路線時(shí)更新路線集合。

OnNavigateAsync有一個(gè)NavigationContext參數(shù)，該參數(shù)提供有關(guān)當(dāng)前異步導(dǎo)航事件的信息，包括目標(biāo)路徑（Path）和取消令牌（CancellationToken）， Path屬性是相對(duì)于應(yīng)用程序基本路徑的用戶目標(biāo)路徑，例如 /WaelsMagicComponent, CancellationToken可用于觀察異步任務(wù)的取消, 用戶導(dǎo)航到其他頁(yè)面時(shí)，OnNavigateAsync自動(dòng)取消當(dāng)前正在運(yùn)行的導(dǎo)航任務(wù), 在OnNavigateAsync內(nèi)部，實(shí)現(xiàn)了要指定加載哪些程序集，Options 包含了一個(gè)在OnNavigateAsync方法內(nèi)部的條件檢查，將路由映射到程序集名稱的查找表中，這些名稱可以注入到組件中，也可以在代碼內(nèi)實(shí)現(xiàn)。

最后，LazyAssemblyLoader 是框架提供的單例服務(wù)來(lái)加載程序集，在路由組件注入 LazyAssemblyLoader，它提供了?提供了LoadAssembliesAsync?方法， 該方法使用JS發(fā)起了網(wǎng)絡(luò)調(diào)用，獲取程序集然后加載到在瀏覽器中的WebAssembly上執(zhí)行的運(yùn)行時(shí)中。

如上所示，這樣可以獨(dú)立地構(gòu)建/維護(hù)不同的模塊，按需加載它們。下圖顯示了導(dǎo)航到 Waels Magic 選項(xiàng)卡后如何按需加載 WaelsMagicComponent，由于應(yīng)用程序避免在啟動(dòng)時(shí)下載所有dll，所以可以加快 Blzaor 程序的啟動(dòng)時(shí)間。

總結(jié)

在這篇文章中，我們演示了如何將不同的組件作為獨(dú)立的庫(kù)進(jìn)行維護(hù)，另外，我們利用延遲加載來(lái)按需加載不同的模塊，而不是在啟動(dòng)時(shí)就開始加載所有的模板，這樣也可以提升程序的啟動(dòng)速度，讓用戶體驗(yàn)更好。

示例代碼：https://github.com/waelkdouh/BlazorMicroFrontend

總結(jié)

以上是生活随笔為你收集整理的「译」 用 Blazor WebAssembly 实现微前端的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。