原文作者: Wael Kdouh
原文連結：https://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上執行的執行時中。
如上所示，這樣可以獨立地構建/維護不同的模組，按需載入它們。下圖顯示了導航到 Waels Magic 選項卡後如何按需載入 WaelsMagicComponent，由於應用程式避免在啟動時下載所有dll，所以可以加快 Blzaor 程式的啟動時間。
總結
在這篇文章中，我們演示瞭如何將不同的元件作為獨立的庫進行維護，另外，我們利用延遲載入來按需載入不同的模組，而不是在啟動時就開始載入所有的模板，這樣也可以提升程式的啟動速度，讓使用者體驗更好。
示例程式碼：https://github.com/waelkdouh/BlazorMicroFrontend
最後
歡迎掃碼關注我們的公眾號，專注國外優秀部落格的翻譯和開源專案分享，也可以新增QQ群 897216102
