前言,

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. Django ORM 查询表中某列字段值

    场景: 有一个表中的某一列,你需要获取到这一列的所有值,你怎么操作? 解决办法: 有一个model为:Event 方式一: 获取内容: Event.objects.values('title') 输出 ...

  2. 详解封装源码包成RPM包

    源码编译安装是最常用安装软件方式,可是面对工作量巨大时候就需要我们的RPM包上场了,统一的模块,一键安装.在面对一定数量的服务器上,RPM就可以为我们节省大量的时间. RPM可以在网上下载,但是当我们 ...

  3. Window+Protobuf使用说明

    Window+Protobuf使用说明 C++WindowCmakeProtocbuf 介绍 起因 由于项目中要用到二进制存储数据,之前使用的方式是按照字节数依次将数据写入字节流中, 但是这样做起来做 ...

  4. 开发AI+诊疗生发系统，「先锋汇美」借力人工智能辅助诊疗实现头皮医学检测...

    困扰年轻人的脱发问题萌生了新兴的产业链.36氪先前曾剖析过近来火热的植发市场,更多人则选择"防范于未然","头皮检测"服务备受关注.此前,人们对"头皮 ...

  5. web前端开发中的各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  6. WFP之位图效果

    首先看一个图片:   在"第一步"这个按钮周围,有一转红色,这个效果就是用WPF的位图效果实现的. 位图效果(BitmapEffect 对象)是简单的像素处理操作.位图效果将 Bi ...

  7. CF思维联系–CodeForces-217C C. Formurosa(这题鸽了）

    ACM思维题训练集合 The Bytelandian Institute for Biological Research (BIBR) is investigating the properties ...

  8. PyCharm 集成 SVN，检出、提交代码

    1.安装 SVN,解决 SVN 目录中没有 svn.exe 问题 重新打开 TortoiseSVN 安装文件 选择 Modify 后在command line client tools 选项修改为 W ...

  9. C#基础之接口（6）

    接口的定义:interface. 什么是接口? 接口,我的理解是接口是一种规范.就好比,一个生产数据线的厂商有很多,形状,外观都不一样,现在制定了一个规范那就是所有的数据线生产商都必须把产品外观形状都 ...

  10. A. Powered Addition(二进制性质-思维)

    \(拿样例来看1 7 6 5\) \(6成长到7是最合理的,因为1s就可以实现而且对于后面来说最优\) \(5成长到7是最合理的,因为2s就可以实现而且对于后面最优\) \(发现了什么?二进制是可以组 ...