当前位置: 代码迷 >> 综合 >> Blazor WebAssembly App第一次打开过慢优化
  详细解决方案

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

热度:12   发布时间:2023-12-26 19:06:53.0

    对于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协议版本

  相关解决方案