Blazor WebAssembly App第一次打開過慢優化

    對于Blazor WebAssembly 該模式的Blazor第一次打開需要的時間很長。該模式的blazor的運作機制是基于WebAssembly對C#進行編譯和運作。第一次打開的時候需要傳輸很多的Dll過來。總體的體積是比較大的，是以造成了第一次打開過慢。

    針對該情況.NET官方給出了一個解決辦法是【壓縮總體包的大小】包如下：

連結：https://docs.microsoft.com/zh-cn/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-3.1#compression

基于官方的解決辦法，我進行再次優化，思路是：先按照官網的方式壓縮代碼包，然後在用Nginx資料傳輸的進行gzip的傳輸方式。這樣基本可以讓Blazor WebAssembly在5S左右打開

    步驟： 1、先下載下傳decode.js.

                2、更新應用以使用解碼器。 将 

wwwroot/index.html

 中結束 

 标記内的标記更改為以下内容：

<script src="decode.js"></script>
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      if (type !== 'dotnetjs' && location.hostname !== 'localhost') {
        return (async function () {
          const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          const originalResponseBuffer = await response.arrayBuffer();
          const originalResponseArray = new Int8Array(originalResponseBuffer);
          const decompressedResponseArray = BrotliDecode(originalResponseArray);
          const contentType = type === 
            'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
          return new Response(decompressedResponseArray, 
            { headers: { 'content-type': contentType } });
        })();
      }
    }
  });
</script>
           

       3、開啟Nginx的gzip：

    在Nginx的配置檔案的http { 下面添加如下配置

gzip  on; # 啟動壓縮
gzip_min_length 5k; # 檔案大小<5k不壓縮，否則進行壓縮處理
gzip_buffers 4 16k; # 設定壓縮所需要的緩沖區大小 
gzip_comp_level 8; #壓縮級别:1-9，值越大壓縮的越明顯
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/octet-stream; #  壓縮檔案類型 
gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，建議開啟
gzip_http_version 1.0;#設定gzip壓縮針對的HTTP協定版本