Blazor WebAssembly的初次访问慢的优化 - chester·chen
source link: https://www.cnblogs.com/chenyishi/p/17039437.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Blazor WebAssembly的初次访问慢的优化
Blazor WebAssembly初次访问需要加载很多dll，体积较大，因此第一次加载比较慢。
针对此问题Microsoft提供了优化方案：压缩
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>
重新访问，即可看到访问速度的提升十分显著。
C#/.net/.net core QQ群：953553560
Recommend
-
3
正文 ServiceAccount ServiceAccount是给运行在Pod的程序使用的身份认证，Pod容器的进程需要访问API Server时用的就是ServiceAccount账户。 ServiceAccount仅局限它所在的namespace，每个namespace创建时都会自...
-
1
正文 MapReduce Hadoop中将数据切分成块存在HDFS不同的DataNode中，如果想汇总，按照常规想法就是，移动数据到统计程序：先把数据读取到一个程序中，再进行汇总。 但是HDFS存的数据量非常大时，对汇总程序所在的服务器将产生巨大压力...
-
3
正文 Hbase Hbase是一种NoSql模式的数据库，采用了列式存储。而采用了列存储天然具备以下优势： 可只查涉及的列，且列可作为索引，相对高效 针对某一列的聚合及其方便 同一列的数...
-
4
正文 Hive将HiveQL（类sql语言）转为MapReduce，完成数据的查询与分析，减少了编写MapReduce的复杂度。它有以下优点： 学习成本低：熟悉sql就能使用 良好的数据分析：底层基于MapReduce实现
-
4
正文 我个人对GRPC是比较感兴趣的，最近在玩通过前端调用GRPC。通过前端调用GRPC业界有两种方式：GRPC Web和GRPC JSON转码。 GRPC Web
-
3
背景 最近一直在搞一件事，就是熟悉Blazor，后期需要将Blazor真正运用到项目内。前期做了一些调研，包括但不限于 Blazor知识学习 组件库生态预研 与现有SPA框架做比对 与WebForm做比对 ...
-
3
6.安装打包工具 安装Inno Setup打包工具 安装好后，进行汉语支持支持。打开Inno Setup安装目录，默认C:\Program Files (x86)\Inno Setup 6。 复制Default.isl，将其拷贝至C:\Program Files (x86)\Inno Setup 6\Languages文件夹，并重命名为Ch...
-
6
正文 CentOS6.x CentOS6中转用Upstrat代替以前的init.d/rcX.d的线性启动方式。 一、相关命令 通过initctl help可以查看相关命令 [root@localhost ~]# initctl help Job commands: start...
-
2
正文 gRPC JSON转码 gRPC JSON 转码允许浏览器应用调用 gRPC 服务，就像它们是使用 JSON 的 RESTful API 一样。 浏览器应用不需要生成 gRPC 客户端或了解 gRPC 的任何信息。 通过使用 HTTP 元数据注释 .proto 文件，可...
-
6
C#11 file关键字 C#11添加了文件作用域类型功能：一...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK