> 原文作者: Wael Kdouh > 原文連結：[https://medium.com/@waelkdouh/microfrontends-with-blazor-webassembly-b25e4ba3f325](https://medium.com/@waelkdouh/microfrontends-with-blazor-webassembly-b25e4ba3f325 "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`,如果程式集包含可路由的元件，則將程式集傳遞迴 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](https://github.com/waelkdouh/BlazorMicroFrontend "https://github.com/waelkdouh/BlazorMicroFrontend") ### 最後 歡迎掃碼關注我們的公眾號，專注國外優秀部落格的翻譯和開源專案分享，也可以新增QQ群 897216102

相關推薦