前言,

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所需的文件的更多相关文章

  1. ASP.NET Core Blazor Webassembly 之 数据绑定

    上一次我们学习了Blazor组件相关的知识(Asp.net Core Blazor Webassembly - 组件).这次继续学习Blazor的数据绑定相关的知识.当代前端框架都离不开数据绑定技术. ...

  2. ASP.NET Core Blazor Webassembly 之 路由

    web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转.我们开发系统的时候总是需要使用路由来实现页面间的跳转.传统的web开发主要是使用a标签或者是服务端redirect来跳转.那今天来 ...

  3. ASP.NET Core Blazor Webassembly 之 组件

    关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...

  4. ASP.NET Core Blazor WebAssembly实现一个简单的TODO List

    基于blazor实现的一个简单的TODO List 最近看到一些大佬都开始关注blazor,我也想学习一下.做了一个小的demo,todolist,仅是一个小示例,参考此vue项目的实现http:// ...

  5. ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调

    Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...

  6. ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)

    Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...

  7. ASP.NET Core Blazor 初探之 Blazor WebAssembly

    最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...

  8. ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台（实现菜单选中）

    Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...

  9. ASP.NET Core Blazor 初探之 Blazor Server

    上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly).这次来看看Blazor Server该怎么玩. ...

随机推荐

  1. memcache---mongodb---redis比较

    Memcached的优点: Memcached可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS(取决于key.value的字节大小以及服务器硬件性能,日常环境中QPS高峰大约在4-6w左右). ...

  2. 2019-2020-1 20199310《Linux内核原理与分析》第四周作业

    1.问题描述 在前面的文章中,已经接触过一些Linux内核的知识,本文将进一步从Linux内核源代码的目录结构入手,在Oracle VM VirtualBox的Linux环境中构造一个简单的操作系统M ...

  3. 2019-2020-1 20199325《Linux内核原理与分析》第六周作业

    正常的使用gdb跟踪分析函数调用 使用make rootfs命令 *用gdb跟踪分析一个系统调用内核函数 对于宏SAVE_ALL来说,这条语句会保存当前线程的现场,然后是执行system_call,跳 ...

  4. Spring Security Oauth2 使用 token 访问资源服务器出现异常：Invalid token does not contain resource id (oauth2)

    异常如图 查看资源服务器的日志 p.a.OAuth2AuthenticationProcessingFilter : Authentication request failed: error=&quo ...

  5. （转）SQLite数据库的加密

    1.创建空的SQLite数据库. //数据库名的后缀你可以直接指定,甚至没有后缀都可以 //方法一:创建一个空sqlite数据库,用IO的方式 FileStream fs = File.Create( ...

  6. rabbitMQ本地安装(Mac版)

    一. 首先测试本机器是否安装wget命令 (可以通过wget www.baidu.com来测试,如果有响应则可直接进入步骤二,如果报错或者提示未安装wget则需要先安装wget) 1http://ft ...

  7. c语言实现数字的倒序输出

    c语言实现数字的倒序输出, 例如: 输入数值:1234倒序输出: 4321 #include <stdio.h> int main(int argc, char *argv[]) { in ...

  8. css之颜色表示法

    css之颜色表示法 十六进制颜色 所有浏览器都支持十六进制颜色值. 十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介 ...

  9. Pytorch中自定义神经网络卷积核权重

    1. 自定义神经网络卷积核权重 神经网络被深度学习者深深喜爱,究其原因之一是神经网络的便利性,使用者只需要根据自己的需求像搭积木一样搭建神经网络框架即可,搭建过程中我们只需要考虑卷积核的尺寸,输入输出 ...

  10. 【集群实战】NFS网络文件共享服务

    1. NFS介绍 1.1 什么是NFS? NFS是Network File System的缩写,中文意思是网络文件系统. 它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录. ...