前言,

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>