[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

博主：撩人的无眠兔
发布时间：2020 年 05 月 21 日
240次浏览
暂无评论
3878字数
分类：技术分享

<h2>前言,&nbsp;</h2> 
Blazor Assembly&nbsp;需要最少 1.9M&nbsp;的下载量.&nbsp; (&nbsp;<a href="https://www.cnblogs.com/zhgangxuan/archive/2020/05/21/12929716.html" target="_blank">Blazor WebAssembly 船新项目下载量测试 , 仅供参考.</a> )&nbsp; 
随着程序越来越复杂,&nbsp;引用的东西越来越多,&nbsp;需要更多的下载量 , 
有一些网站的网络可能较差,&nbsp;加载这些文件需要一定的时间.&nbsp; 
&nbsp; 
对于一些网站而言,&nbsp;它不是一开始就把wasm页面暴露给游客的.&nbsp;&nbsp; 
wasm更加适合做的,&nbsp; 是一些需要与服务器进行大量交互的App类程序.&nbsp; 
例如网站后台管理界面,&nbsp; 聊天后台界面,&nbsp;等等.&nbsp; 
所以,&nbsp;大部分场合,&nbsp;游客是先进了网站,&nbsp;然后登陆,&nbsp;最后才到wasm页面.&nbsp; 
&nbsp; 
基于这种情况,&nbsp;这里提供了一个例子,&nbsp;关于如何预先加载wasm所需的dll 
达到如此效果: 
游客进入网站欢迎页 =>&nbsp;欢迎页在背后预先加载dll资源 =>&nbsp;游客进入WASM界面,&nbsp;加载速度变快.&nbsp; 
&nbsp; 
<h2>例子工程 :&nbsp;</h2> 
<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521141638763-1803785167.png" class="aligncenter"> 
&nbsp; 
&nbsp; 
<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521141612745-125827050.png" class="aligncenter"> 
&nbsp; 
&nbsp; 
首先,&nbsp;这个例子使用的是&nbsp; Asp.Net hosted ,&nbsp;加上 PWA&nbsp;模式.&nbsp; 
那么这里就有 Asp.Net Core 的程序在服务器运行着 .&nbsp; 
&nbsp; 
<h3>修改WASM首页地址</h3> 
<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521141859262-1768894958.png" class="aligncenter"> 
&nbsp; 
&nbsp;把 Index.razor&nbsp;的地址改成 /Home ,&nbsp; 因为我们需要网站的首页是欢迎页.&nbsp; 
&nbsp; 
<h3>新增网站首页</h3> 
<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142021222-778490407.png" class="aligncenter"> 
&nbsp; 
&nbsp;我们用 Asp.Net Core&nbsp;的 razor页面来做首页.&nbsp; 没有Controller ,&nbsp; 当然你也可以用自己喜欢的方式,&nbsp;使用 MVC ,&nbsp;甚至是Blazor Server Side&nbsp;来做首页.&nbsp; 
<h2>修改首页代码</h2> 
<pre>@page
@{
Layout = null;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>欢迎页面</title>
</head>
<body>

<div style="text-align:center">
<h1>您好!</h1>
<p>这是一个加载非常快的欢迎页面.</p>
<p>您应该在0.000001秒之内就打开这个页面了.</p>
<p>
这里写了800+个字, 描述了这个系统有多好多好.
</p>
<div id="progressbar"></div>
<p>
<button onclick="location='/Home'">进入系统...</button>
</p>
</div>

console.log(preLoadFinish + "/" + preLoadCount, dllname);

var progressbar = document.getElementById("progressbar");
if (progressbar) {
progressbar.style.cssText = "display:inline-block;width:300px;height:10px;;border:solid 1px gray;position:relative;"
progressbar.innerHTML = "" + (300 * preLoadFinish / preLoadCount) + "px'>";
}

if (preLoadFinish == preLoadCount) {
var span = new Date().getTime() - preLoadStart;
console.log("All Done In " + span + " ms , " + preLoadError + " errors");
}
}
xh.send("");
}
function preLoadAll() {
preLoadStart = new Date().getTime();
var xh = new XMLHttpRequest();
xh.open("GET", "_framework/blazor.boot.json", true);
xh.onload = function () {
var res = JSON.parse(xh.responseText);
console.log(res);
for (var p in res.resources.assembly)
preLoadResource("_framework/_bin/" + p);
for (var p in res.resources.runtime)
preLoadResource("_framework/wasm/" + p);
preLoadResource("_framework/blazor.webassembly.js");
}
xh.send("");
}
preLoadAll();
</script>

</body>
</html></pre> 
&nbsp; 
这就是一个欢迎页,&nbsp;欢迎页非常简单,&nbsp;下载非常迅速,&nbsp;用户很快就能打开这个页面.&nbsp; 
(新增了一个简单的进度条.&nbsp; 这个页面完全可以设计成 Loading&nbsp;界面)&nbsp; 
&nbsp; 
<h2>效果</h2> 
&nbsp;<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142420446-1000270844.png" class="aligncenter"> 
&nbsp; 
&nbsp;由于这个是开发中的测试页面,&nbsp; dll没有经过裁剪,&nbsp; 所以下载量为 6.6M.&nbsp;发布程序之后,&nbsp;下载量会大幅度减少:&nbsp; (&nbsp;<a href="https://www.cnblogs.com/zhgangxuan/archive/2020/05/21/12929716.html" target="_blank">Blazor WebAssembly 船新项目下载量测试 , 仅供参考.</a>&nbsp;)&nbsp; 
&nbsp;根据页面的脚本,&nbsp;欢迎页展示之后,&nbsp;便会开始预先下载wasm所需的所有文件.&nbsp; 
&nbsp; 
点击进入系统后,&nbsp; 
<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142611466-603837794.png" class="aligncenter"> 
&nbsp; 
&nbsp;可以看到 ,&nbsp;大部分文件已经缓存成功.&nbsp; 后续的下载量只有 61KB .&nbsp; 主要是bootstrap css和iconic字体.&nbsp; 
&nbsp; 
<h2>分析脚本原理:</h2> 
整个文件,&nbsp;最关键的是&nbsp;&nbsp;_framework/blazor.boot.json ,&nbsp;&nbsp; 
<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142817339-717838714.png" class="aligncenter"> 
&nbsp; 
&nbsp;<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142839635-770060325.png" class="aligncenter"> 
&nbsp; 
&nbsp;我们在客户端读了这个文件,&nbsp;就知道所需要的资源在哪里了.&nbsp; 
<img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142908097-1958811419.png" class="aligncenter"> 
&nbsp; 
&nbsp;通过循环 .assembly&nbsp;和 .runtime ,&nbsp;就可以处理这些文件 
&nbsp; 
<h1>还是挺简单的.&nbsp;</h1> 
原理就在这里.&nbsp;有需要的可以根据自己的业务情况进行更优化的处理.&nbsp; 
代码 : https://github.com/BlazorPlus/BlazorWasmDemoPreLoading 
&nbsp;<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal">版权属于：撩人的无眠兔本文链接：<a class="content-copyright" href="https://www.wumiantu.com/technology/0OG1xg.html">https://www.wumiantu.com/technology/0OG1xg.html</a>转载时须注明出处及本声明</blockquote>

看了文章不打款？

发表评论取消回复

[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

撩人的无眠兔 • 2020 年 05 月 21 日

[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

发表评论取消回复

十年荣耀，等你回归——叶神

宝塔Linux面板安装教程

计算机硬件的组成

Windows V.S. Linux

泰迪熊《精彩时刻》

【大仙不闹】马可一笑，生死难料

员工抗议、佛州确诊病例居高不下，奥兰多迪士尼乐园仍将按计划重开

S19野区最强凶兽觉醒！看了立马当野王，有手就能赢！

Notification API，为你的网页添加桌面通知推送

武书连2018中国大学生师比排行榜清华大学获双一流大学冠军

[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

发表评论 取消回复

[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

发表评论取消回复