针对此问题Microsoft提供了优化方案:压缩
https://learn.microsoft.com/zh-cn/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#compression-1
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 -t nginx -s reload
Brotli压缩
Blazor 依赖于主机提供适当的压缩文件。 使用 ASP.NET Core 托管项目时,主机项目能够执行内容协商并提供静态压缩文件。 托管 Blazor WebAssembly 独立应用时,可能需要额外的工作来确保提供静态压缩文件。
<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>
重新访问,即可看到访问速度的提升十分显著。