Blazor WebAssembly的初次訪問慢的最佳化

chester·chen發表於2023-01-11
BlazorWeb

Blazor WebAssembly初次訪問需要載入很多dll，體積較大，因此第一次載入比較慢。

針對此問題Microsoft提供了最佳化方案：壓縮

https://learn.microsoft.com/zh-cn/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#compression-1

gzip壓縮

首先透過nginx開啟gzip壓縮，配置如下

http
    {
     ...
       #是否啟動gzip壓縮,on代表啟動,off代表開啟
        gzip on;
       #如果檔案大於1k就啟動壓縮
        gzip_min_length  1k;
       #以16k為單位,按照原始資料的大小以4倍的方式申請記憶體空間,一般此項不要修改
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
       #壓縮的等級,數字選擇範圍是1-9,數字越小壓縮的速度越快,消耗cpu就越大
        gzip_comp_level 2;
       #需要壓縮的常見靜態資源
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/octet-stream;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
       #由於nginx的壓縮發生在瀏覽器端而微軟的ie6很坑爹,會導致壓縮後圖片看不見所以該選項是禁止ie6發生壓縮
        gzip_disable   "MSIE [1-6]\.";
    ...
    }

 

重啟nginx

#用來測試配置檔案
nginx -t
  
nginx -s reload

 

Brotli壓縮

釋出 Blazor WebAssembly 應用時，將在釋出過程中對輸出內容進行靜態壓縮，從而減小應用的大小，並免去執行時壓縮的開銷。 使用Brotli壓縮演算法。

Blazor 依賴於主機提供適當的壓縮檔案。 使用 ASP.NET Core 託管專案時，主機專案能夠執行內容協商並提供靜態壓縮檔案。 託管 Blazor WebAssembly 獨立應用時，可能需要額外的工作來確保提供靜態壓縮檔案。

首先在 wwwroot/index.html 檔案中，在 Blazor 的 <script> 標記上將 autostart 設定為 false：

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

在 Blazor 的 <script> 標記之後和結束 </body> 標記之前，新增以下 JavaScript 程式碼 <script> 塊：

<script type="module">
  import { BrotliDecode } from './decode.min.js';
  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>

 

 重新訪問，即可看到訪問速度的提升十分顯著。

相關文章