「譯」用 Blazor WebAssembly 實現微前端

2021 年 1 月 5 日
筆記

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

我聊下最近我在做的事情，然後分享下在Blazor WebAssembly 微前端的實現細節，這篇文章是我的一些心得，以及一個示例的 Demo 項目，展示了如何使用Blazor 實現多模塊分佈式的應用程序的微前端，如下圖所示。

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

我的示例項目的結構是下邊這樣

Blazor 的延遲加載功能允許標記應用程序集，當用戶導航到特定路由時，才開始加載程序集，這個功能包括修改程序路由時修改項目文件。

打開我們的 Blazor 項目，然後修改項目 .csproj 文件，在這裡標記需要延遲加載的 dll 類型的程序集，然後 Blazor 啟動後就不會加載這個程序集，我下邊的代碼中標記了 WaelsMagicFeature.dll 用於延遲加載，如果設置的程序集有其他的依賴，也需要把依賴程序集設置延遲加載。

Blazor 的路由組件指定搜索可以訪問的路由組件的程序集，當用戶訪問到路由菜單，路由組件也負責渲染，在應用的路由組件(App.razor) 添加一個 OnNavigateAsync 的回調，當用戶第一次直接從瀏覽器導航到路由時，OnNavigateAsync 被調用執行，如果延遲加載的程序集包含了可路由的組件，添加一個 List<Assembly>,如果程序集包含可路由的組件，則將程序集傳遞迴 AdditionalAssemblies 集合，框架在程序集中搜索路線，並在找到任何新路線時更新路線集合。

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

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