前言, Blazor Assembly 需要最少 1.9M 的下載量. ( Blazor WebAssembly 船新項目下載量測試 , 僅供參考. ) 隨著程式越來越複雜, 引用的東西越來越多, 需要更多的下載量 , 有一些網站的網路可能較差, 載入這些文件需要一定的時間. 對於一些網站而言, 它 ...
前言,
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
