Blazor WebAssembly App第一次打开过慢优化

    对于Blazor WebAssembly 该模式的Blazor第一次打开需要的时间很长。该模式的blazor的运行机制是基于WebAssembly对C#进行编译和运行。第一次打开的时候需要传输很多的Dll过来。总体的体积是比较大的，所以造成了第一次打开过慢。

    针对该情况.NET官方给出了一个解决办法是【压缩总体包的大小】包如下：

链接：托管和部署 ASP.NET Core Blazor WebAssembly | Microsoft Learn

基于官方的解决办法，我进行再次优化，思路是：先按照官网的方式压缩代码包，然后在用Nginx数据传输的进行gzip的传输方式。这样基本可以让Blazor WebAssembly在1-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协议版本