「譯」用 Blazor WebAssembly 實現微前端

原文做者: 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