[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件
前言,
Blazor Assembly 需要最少 1.9M 的下载量. ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. )
随着程序越来越复杂, 引用的东西越来越多, 需要更多的下载量 ,
有一些网站的网络可能较差, 加载这些文件需要一定的时间.
对于一些网站而言, 它不是一开始就把wasm页面暴露给游客的.
wasm更加适合做的, 是一些需要与服务器进行大量交互的App类程序.
例如网站后台管理界面, 聊天后台界面, 等等.
所以, 大部分场合, 游客是先进了网站, 然后登陆, 最后才到wasm页面.
基于这种情况, 这里提供了一个例子, 关于如何预先加载wasm所需的dll
达到如此效果:
游客进入网站欢迎页 => 欢迎页在背后预先加载dll资源 => 游客进入WASM界面, 加载速度变快.
例子工程 :
首先, 这个例子使用的是 Asp.Net hosted , 加上 PWA 模式.
那么这里就有 Asp.Net Core 的程序在服务器运行着 .
修改WASM首页地址
把 Index.razor 的地址改成 /Home , 因为我们需要网站的首页是欢迎页.
新增网站首页
我们用 Asp.Net Core 的 razor页面来做首页. 没有Controller , 当然你也可以用自己喜欢的方式, 使用 MVC , 甚至是Blazor Server Side 来做首页.
修改首页代码
@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> <script type="text/javascript">
var preLoadStart = 0;
var preLoadCount = 0;
var preLoadError = 0;
var preLoadFinish = 0;
function preLoadResource(dllname) {
preLoadCount++;
var xh = new XMLHttpRequest();
xh.open("GET", dllname, true);
xh.onload = function () {
preLoadFinish++;
if (xh.status != 200) preLoadError++; 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 = "<span style='position:absolute;left:0;background-color:darkgreen;height:10px;width:" + (300 * preLoadFinish / preLoadCount) + "px'></span>";
} 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>
这就是一个欢迎页, 欢迎页非常简单, 下载非常迅速, 用户很快就能打开这个页面.
(新增了一个简单的进度条. 这个页面完全可以设计成 Loading 界面)
效果
由于这个是开发中的测试页面, dll没有经过裁剪, 所以下载量为 6.6M. 发布程序之后, 下载量会大幅度减少: ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. )
根据页面的脚本, 欢迎页展示之后, 便会开始预先下载wasm所需的所有文件.
点击进入系统后,
可以看到 , 大部分文件已经缓存成功. 后续的下载量只有 61KB . 主要是bootstrap css和iconic字体.
分析脚本原理:
整个文件, 最关键的是 _framework/blazor.boot.json ,
我们在客户端读了这个文件, 就知道所需要的资源在哪里了.
通过循环 .assembly 和 .runtime , 就可以处理这些文件
还是挺简单的.
原理就在这里. 有需要的可以根据自己的业务情况进行更优化的处理.
代码 : https://github.com/BlazorPlus/BlazorWasmDemoPreLoading
[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件的更多相关文章
- ASP.NET Core Blazor Webassembly 之 数据绑定
上一次我们学习了Blazor组件相关的知识(Asp.net Core Blazor Webassembly - 组件).这次继续学习Blazor的数据绑定相关的知识.当代前端框架都离不开数据绑定技术. ...
- ASP.NET Core Blazor Webassembly 之 路由
web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...
- ASP.NET Core Blazor Webassembly 之 组件
关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...
- ASP.NET Core Blazor WebAssembly实现一个简单的TODO List
基于blazor实现的一个简单的TODO List 最近看到一些大佬都开始关注blazor,我也想学习一下.做了一个小的demo,todolist,仅是一个小示例,参考此vue项目的实现http:// ...
- ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调
Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...
- ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)
Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...
- ASP.NET Core Blazor 初探之 Blazor WebAssembly
最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...
- ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台(实现菜单选中)
Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...
- ASP.NET Core Blazor 初探之 Blazor Server
上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...
随机推荐
- SESSION劫持
服务端和客户端之间是通过session(会话)来连接沟通.当客户端的浏览器连接到服务器后,服务器就会建立一个该用户的session.每个用户的session都是独立的,并且由服务器来维护.每个用户的s ...
- 详解封装源码包成RPM包
源码编译安装是最常用安装软件方式,可是面对工作量巨大时候就需要我们的RPM包上场了,统一的模块,一键安装.在面对一定数量的服务器上,RPM就可以为我们节省大量的时间. RPM可以在网上下载,但是当我们 ...
- HTML JavaScript 基础(下)
一.JavaScript 函数 1.普通函数-有函数名 function func(){ } 2.匿名函数-无函数名 setInterval(function(){ console.log(123); ...
- CCS进阶——div的宽度和高度是由什么决定的?
核心知识 文档流/普通流(Normal Flow) 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding) 块级元素的宽高(高度是内部文档流元素的高度总和,宽度 ...
- 熟透vue手机购物商城开发的重要性
带手机验证码登陆, 带全套购物车系统 带数据库 前后端分离开发 带定位用户功能 数据库代码为本地制作好了 带支付宝支付系统 带django开发服务器接口教程 地址: https://www.dua ...
- Golang Context 的原理与实战
本文让我们一起来学习 golang Context 的使用和标准库中的Context的实现. golang context 包 一开始只是 Google 内部使用的一个 Golang 包,在 Gola ...
- Redis 6.0 正式版终于发布了!除了多线程还有什么新功能?
Redis 6.0.1 于 2020 年 5 月 2 日正式发布了,如 Redis 作者 antirez 所说,这是迄今为止最"企业"化的版本,也是有史以来改动最大的一个 Redi ...
- Fibonacci Sequence
0 递归 斐波那契数列定义: $F(n)=\left\{\begin{matrix}0, & n=0\\ 1, & n=1\\ F(n-1)+F(n-2), & n>1\ ...
- 带权并查集--hdu3047 ZJnu stadium
题意:给出一个n,m,n表示的是有n 个人,m表示的是 有m 对关系: 接下来输入的就是这m对关系,a,b,x:表示的是a,b相距x个距离:然后判断输入的是否与这个数的上面的数信息一致, 输出不一致的 ...
- Floyd —Warshall(最短路及其他用法详解)
一.多元最短路求法 多元都求出来了,单源的肯定也能求. 思想是动态规划的思想:从任意节点A到任意节点B的最短路径不外乎2种可能,1是直接从A到B,2是从A经过若干个节点X到B.所以,我们假设Dis(A ...