c# .net 6 blazor WebAssembly

Blazor WebAssembly 載入優化

連子懿 Eric Lian 2023/07/19 17:26:20

0 1319

Blazor WebAssembly 是什麼 ?

為 Microsoft 建構SPA的框架,以 WebAssembly 的形式運行於客戶端的瀏覽器,因為大部分瀏覽器(要視版本而定)現在支援WebAssembly的執行,再搭配上WebAssembly 本身為二進制格式的文件,將可以直接被CPU直接執行,所以在速度上比起JavaScript來說更快

前言

因為WebAssembly 運作在client端,在初次進入web時,將需要下載相關的wasm檔案與編譯過MSIL檔案,當然還有index.html,css,js等等,那既然初次需要下載麼多的檔案,載入的時間將會十分考驗使用者的耐心,為了解決該問題,以下整理兩種方式

適用環境(Framework)

.NET 6.0

(一) . 壓縮檔案

*完全不壓縮

18.7 MB transferred 代表下載檔案大小

18.7 MB resouces 代表檔案實際大小

*套用壓縮

範例 : 部屬在 IIS 以提供Brotli或Gzip壓縮之web.config設定:

參考文件: 連結

官方給出的 web.config範例

*有自訂web.config 需在Web專案的啟動設定檔加入以下程式碼 :

  <Target Name="CopyWebConfig" AfterTargets="Publish">
 
  <Copy SourceFiles="web.config" DestinationFolder="$(PublishDir)" />
 
  </Target>

: 是指在發布時會將自訂的web.config 複製到發布的資料夾中

  <PropertyGroup>
 
  <IsTransformWebConfigDisabled>true</IsTransformWebConfigDisabled>
 
  </PropertyGroup>

:是指在發布時不產生額外的web.config

(二) . 延遲載入

參考 : 連結

參考1 : 連結

參考2 :

https://www.youtube.com/watch?v=e_22VhPQJj0

作用 : 初次啟動時,不載入一開始用不到的DLL檔案,在有需要使用時才進行載入,載入後並不會重複載入

設定 1 : 專案啟動檔 : 加入以下

  <ItemGroup>
 
  <BlazorWebAssemblyLazyLoad Include="Radzen.Blazor.dll"/> //此為需要延遲載入的檔案全名
 
  </ItemGroup>

設定2 : App.razor

範例 :

(1). 注入延遲載入服務

  @inject Microsoft.AspNetCore.Components.WebAssembly.Services.LazyAssemblyLoader AssemblyLoader
 

(2). 在Router 組件加上設定

AdditionalAssemblies="lazyLoadedAssemblies" : 取得延遲列表的集合

OnNavigateAsync="OnNavigation" : 每當有頁面跳轉都會觸發 OnNavigation

  <Router AppAssembly="@typeof(App).Assembly"
 
  AdditionalAssemblies="lazyLoadedAssemblies"
 
  OnNavigateAsync="OnNavigation">

(3).

:初始化lazyLoadedAssemblies

:設定'lazy_test'頁面 , 要載入的檔案集合

  @code{
 
  //延遲程式列表
 
  private List<System.Reflection.Assembly> lazyLoadedAssemblies = new List<System.Reflection.Assembly>();
 
  private async Task OnNavigation(NavigationContext context)
 
  {
 
  if (context.Path == "lazy_test") // 設定這個頁面要載入的DLL
 
  {
 
  var assemblies = await AssemblyLoader.LoadAssembliesAsync(new[] { "Radzen.Blazor.dll" });
 
  lazyLoadedAssemblies.AddRange(assemblies);
 
  }
 
  }
 
  }