Loading... <h2>前言, </h2> <p>Blazor Assembly 需要最少 1.9M 的下载量. ( <a href="https://www.cnblogs.com/zhgangxuan/archive/2020/05/21/12929716.html" target="_blank">Blazor WebAssembly 船新项目下载量测试 , 仅供参考.</a> ) </p> <p>随着程序越来越复杂, 引用的东西越来越多, 需要更多的下载量 ,</p> <p>有一些网站的网络可能较差, 加载这些文件需要一定的时间. </p> <p> </p> <p>对于一些网站而言, 它不是一开始就把wasm页面暴露给游客的. </p> <p>wasm更加适合做的, 是一些需要与服务器进行大量交互的App类程序. </p> <p>例如网站后台管理界面, 聊天后台界面, 等等. </p> <p>所以, 大部分场合, 游客是先进了网站, 然后登陆, 最后才到wasm页面. </p> <p> </p> <p>基于这种情况, 这里提供了一个例子, 关于如何预先加载wasm所需的dll</p> <p>达到如此效果:</p> <p><span style="color: #ff0000;">游客进入网站欢迎页</span> => <span style="color: #339966;">欢迎页在背后预先加载dll资源</span> => <span style="color: #0000ff;">游客进入WASM界面, 加载速度变快.</span> </p> <p> </p> <h2>例子工程 : </h2> <p><img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521141638763-1803785167.png" class="aligncenter"></p> <p> </p> <p> </p> <p><img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521141612745-125827050.png" class="aligncenter"></p> <p> </p> <p> </p> <p>首先, 这个例子使用的是 Asp.Net hosted , 加上 PWA 模式. </p> <p>那么这里就有 Asp.Net Core 的程序在服务器运行着 . </p> <p> </p> <h3>修改WASM首页地址</h3> <p><img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521141859262-1768894958.png" class="aligncenter"></p> <p> </p> <p> 把 Index.razor 的地址改成 /Home , 因为我们需要网站的首页是欢迎页. </p> <p> </p> <h3>新增网站首页</h3> <p><img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142021222-778490407.png" class="aligncenter"></p> <p> </p> <p> 我们用 Asp.Net Core 的 razor页面来做首页. 没有Controller , 当然你也可以用自己喜欢的方式, 使用 MVC , 甚至是Blazor Server Side 来做首页. </p> <h2>修改首页代码</h2> <pre><span style="color: #000000;">@page @{ Layout = null; } </span><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width"</span> <span style="color: #0000ff;">/></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>欢迎页面<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="text-align:center"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>您好!<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是一个加载非常快的欢迎页面.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>您应该在0.000001秒之内就打开这个页面了.<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 这里写了800+个字, 描述了这个系统有多好多好. </span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="progressbar"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">button </span><span style="color: #ff0000;">onclick</span><span style="color: #0000ff;">="location='/Home'"</span><span style="color: #0000ff;">></span>进入系统...<span style="color: #0000ff;"></</span><span style="color: #800000;">button</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span> <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadStart </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadCount </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadError </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadFinish </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadResource(dllname) { preLoadCount</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> xh </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> XMLHttpRequest(); xh.open(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">GET</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, dllname, </span><span style="background-color: #f5f5f5; color: #0000ff;">true</span><span style="background-color: #f5f5f5; color: #000000;">); xh.onload </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () { preLoadFinish</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">; </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (xh.status </span><span style="background-color: #f5f5f5; color: #000000;">!=</span> <span style="background-color: #f5f5f5; color: #000000;">200</span><span style="background-color: #f5f5f5; color: #000000;">) preLoadError</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">; console.log(preLoadFinish </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">/</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadCount, dllname); </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> progressbar </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">progressbar</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">); </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (progressbar) { progressbar.style.cssText </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">display:inline-block;width:300px;height:10px;;border:solid 1px gray;position:relative;</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> progressbar.innerHTML </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"><span style='position:absolute;left:0;background-color:darkgreen;height:10px;width:</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #000000;">300</span> <span style="background-color: #f5f5f5; color: #000000;">*</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadFinish </span><span style="background-color: #f5f5f5; color: #000000;">/</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadCount) </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">px'></span></span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">; } </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (preLoadFinish </span><span style="background-color: #f5f5f5; color: #000000;">==</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadCount) { </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> span </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Date().getTime() </span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadStart; console.log(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">All Done In </span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> span </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> ms , </span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadError </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;"> errors</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">); } } xh.send(</span><span style="background-color: #f5f5f5; color: #000000;">""</span><span style="background-color: #f5f5f5; color: #000000;">); } </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> preLoadAll() { preLoadStart </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Date().getTime(); </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> xh </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> XMLHttpRequest(); xh.open(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">GET</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">_framework/blazor.boot.json</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">true</span><span style="background-color: #f5f5f5; color: #000000;">); xh.onload </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> () { </span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> res </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> JSON.parse(xh.responseText); console.log(res); </span><span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> p </span><span style="background-color: #f5f5f5; color: #0000ff;">in</span><span style="background-color: #f5f5f5; color: #000000;"> res.resources.assembly) preLoadResource(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">_framework/_bin/</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> p); </span><span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> p </span><span style="background-color: #f5f5f5; color: #0000ff;">in</span><span style="background-color: #f5f5f5; color: #000000;"> res.resources.runtime) preLoadResource(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">_framework/wasm/</span><span style="background-color: #f5f5f5; color: #000000;">"</span> <span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> p); preLoadResource(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">_framework/blazor.webassembly.js</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">); } xh.send(</span><span style="background-color: #f5f5f5; color: #000000;">""</span><span style="background-color: #f5f5f5; color: #000000;">); } preLoadAll(); </span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> <p> </p> <p>这就是一个欢迎页, 欢迎页非常简单, 下载非常迅速, 用户很快就能打开这个页面. </p> <p>(新增了一个简单的进度条. 这个页面完全可以设计成 Loading 界面) </p> <p> </p> <h2>效果</h2> <p> <img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142420446-1000270844.png" class="aligncenter"></p> <p> </p> <p> 由于这个是开发中的测试页面, dll没有经过裁剪, 所以下载量为 6.6M. 发布程序之后, 下载量会大幅度减少: ( <a href="https://www.cnblogs.com/zhgangxuan/archive/2020/05/21/12929716.html" target="_blank">Blazor WebAssembly 船新项目下载量测试 , 仅供参考.</a> ) </p> <p> 根据页面的脚本, 欢迎页展示之后, 便会开始预先下载wasm所需的所有文件. </p> <p> </p> <p>点击进入系统后, </p> <p><img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142611466-603837794.png" class="aligncenter"></p> <p> </p> <p> 可以看到 , 大部分文件已经缓存成功. 后续的下载量只有 61KB . 主要是bootstrap css和iconic字体. </p> <p> </p> <h2>分析脚本原理:</h2> <p>整个文件, 最关键的是 _framework/blazor.boot.json , </p> <p><img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142817339-717838714.png" class="aligncenter"></p> <p> </p> <p> <img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142839635-770060325.png" class="aligncenter"></p> <p> </p> <p> 我们在客户端读了这个文件, 就知道所需要的资源在哪里了. </p> <p><img src="https://img2020.cnblogs.com/blog/813106/202005/813106-20200521142908097-1958811419.png" class="aligncenter"></p> <p> </p> <p> 通过循环 .assembly 和 .runtime , 就可以处理这些文件</p> <p> </p> <h1>还是挺简单的. </h1> <p>原理就在这里. 有需要的可以根据自己的业务情况进行更优化的处理. </p> <p>代码 : https://github.com/BlazorPlus/BlazorWasmDemoPreLoading</p> <p> </p><hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于:撩人的无眠兔</p><p class="content-copyright">本文链接:<a class="content-copyright" href="https://www.wumiantu.com/technology/0OG1xg.html">https://www.wumiantu.com/technology/0OG1xg.html</a></p><p class="content-copyright">转载时须注明出处及本声明</p></blockquote> © 允许规范转载 赞赏 看了文章不打款? ×Close 赞赏作者 扫一扫支付 支付宝支付 微信支付