Blazor WebAssembly的初次访问慢的优化

Posted 2023-01-13 dotNET跨平台

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>

 重新访问，即可看到访问速度的提升十分显著。