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