「譯」用 Blazor WebAssembly 實現微前端

SpringLeee 發表於 2021-01-05

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

「譯」用 Blazor WebAssembly 實現微前端

我聊下最近我在做的事情,然後分享下在Blazor WebAssembly 微前端的實現細節,這篇文章是我的一些心得,以及一個示例的 Demo 專案,展示瞭如何使用Blazor 實現多模組分散式的應用程式的微前端,如下圖所示。

「譯」用 Blazor WebAssembly 實現微前端

為了實現上面的架構,這是我使用到了.NET 5 對與 Blazor WebAssembly 的一項新功能,延遲載入,直到需要這些程式集的時候,才開始載入,從而提高Blazor WebAssembly應用程式的啟動效能,比如如,只有使用者導航到該元件時,才開始載入單個元件的程式集,載入後,程式集將快取在客戶端,可用於以後的所有導航。

「譯」用 Blazor WebAssembly 實現微前端

我的示例專案的結構是下邊這樣

「譯」用 Blazor WebAssembly 實現微前端

Blazor 的延遲載入功能允許標記應用程式集,當使用者導航到特定路由時,才開始載入程式集,這個功能包括修改程式路由時修改專案檔案。

開啟我們的 Blazor 專案,然後修改專案 .csproj 檔案,在這裡標記需要延遲載入的 dll 型別的程式集,然後 Blazor 啟動後就不會載入這個程式集,我下邊的程式碼中標記了 WaelsMagicFeature.dll 用於延遲載入,如果設定的程式集有其他的依賴,也需要把依賴程式集設定延遲載入。

「譯」用 Blazor WebAssembly 實現微前端

Blazor 的路由元件指定搜尋可以訪問的路由元件的程式集,當使用者訪問到路由選單,路由元件也負責渲染,在應用的路由元件(App.razor) 新增一個 OnNavigateAsync 的回撥,當使用者第一次直接從瀏覽器導航到路由時,OnNavigateAsync 被呼叫執行,如果延遲載入的程式集包含了可路由的元件,新增一個 List<Assembly>,如果程式集包含可路由的元件,則將程式集傳遞迴 AdditionalAssemblies 集合,框架在程式集中搜尋路線,並在找到任何新路線時更新路線集合。

OnNavigateAsync有一個NavigationContext引數,該引數提供有關當前非同步導航事件的資訊,包括目標路徑(Path)和取消令牌(CancellationToken), Path屬性是相對於應用程式基本路徑的使用者目標路徑,例如 /WaelsMagicComponent, CancellationToken可用於觀察非同步任務的取消, 使用者導航到其他頁面時,OnNavigateAsync自動取消當前正在執行的導航任務, 在OnNavigateAsync內部,實現了要指定載入哪些程式集,Options 包含了一個在OnNavigateAsync方法內部的條件檢查,將路由對映到程式集名稱的查詢表中,這些名稱可以注入到元件中,也可以在程式碼內實現。

最後,LazyAssemblyLoader 是框架提供的單例服務來載入程式集,在路由元件注入 LazyAssemblyLoader,它提供了 提供了LoadAssembliesAsync 方法, 該方法使用JS發起了網路呼叫,獲取程式集然後載入到在瀏覽器中的WebAssembly上執行的執行時中。

「譯」用 Blazor WebAssembly 實現微前端

如上所示,這樣可以獨立地構建/維護不同的模組,按需載入它們。下圖顯示了導航到 Waels Magic 選項卡後如何按需載入 WaelsMagicComponent,由於應用程式避免在啟動時下載所有dll,所以可以加快 Blzaor 程式的啟動時間。

「譯」用 Blazor WebAssembly 實現微前端

總結

在這篇文章中,我們演示瞭如何將不同的元件作為獨立的庫進行維護,另外,我們利用延遲載入來按需載入不同的模組,而不是在啟動時就開始載入所有的模板,這樣也可以提升程式的啟動速度,讓使用者體驗更好。

示例程式碼:https://github.com/waelkdouh/BlazorMicroFrontend

最後

歡迎掃碼關注我們的公眾號,專注國外優秀部落格的翻譯和開源專案分享,也可以新增QQ群 897216102

「譯」用 Blazor WebAssembly 實現微前端