使用中间件日志查看Blazor WebAssembly静态资源加载顺序

通过日志中间件查看Blazor WASM静态资源加载顺序

背景

Blazor WebAssembly托管模型部署到服务器时：

Blazor WASM: 编译为静态资源（.html, .js, .wasm）
API（如果有的话）：作为独立的ASP.NET Core 应用运行在服务器上

当我们从浏览器访问一个Blazor WebAssembly应用时（即用户点击了URL），服务器将返回静态文件，浏览器解析并渲染页面。

查看日志

Server端

新建一个LoggingMiddleware.cs文件：

public class LoggingMiddleware
{
    private readonly RequestDelegate _next;
    private readonly string _logFilePath;
    private readonly SemaphoreSlim _semaphore = new(1, 1);

    public LoggingMiddleware(RequestDelegate next, IWebHostEnvironment env)
    {
        _next = next;

        // 日志目录路径
        var logDirectory = Path.Combine(env.ContentRootPath, "uploads");

        if(!Directory.Exists(logDirectory))
        {
            Directory.CreateDirectory(logDirectory);
        }

        // 日志文件路径
        _logFilePath = Path.Combine(logDirectory, "log.txt");
    }

    public async Task InvokeAsync(HttpContext context)
    {
        var logMessage = $"{DateTime.UtcNow:yyyy-MM-dd HH:mm:ss.fff} | " +
                        $"{context.Request.Method} | " +
                        $"{context.Request.Path}{context.Request.QueryString}\n";
        try
        {
            await _semaphore.WaitAsync();
            await File.AppendAllTextAsync(_logFilePath, logMessage, Encoding.UTF8);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Failed to write to log file: {ex.Message}");
        }
        finally
        {
            _semaphore.Release();
        }

        await _next(context);
    }
}

注：日志文件txt的路径放在env.ContentRootPath/uploads/log.txt

在Program.cs文件中注册服务和添加日志中间件：

var app = builder.Build();
    ...
// 添加中间件
app.UseMiddleware<LoggingMiddleware>();
    ...
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

运行程序，并打开log.txt:

2025-05-16 05:31:32.962 | GET | /
2025-05-16 05:31:33.090 | GET | /css/bootstrap/bootstrap.min.css
2025-05-16 05:31:33.090 | GET | /css/app.css
2025-05-16 05:31:33.091 | GET | /AW.Client.styles.css
2025-05-16 05:31:33.092 | GET | /_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css
2025-05-16 05:31:33.098 | GET | /_framework/blazor.webassembly.js
2025-05-16 05:31:33.099 | GET | /js/scriptsInOne.js
2025-05-16 05:31:33.100 | GET | /js/sidebarDrag.js
2025-05-16 05:31:33.101 | GET | /_content/AWUI/css/AWUI.css
2025-05-16 05:31:33.101 | GET | /js/themeToggle.js
2025-05-16 05:31:33.142 | GET | /_content/AWUI/js/AWUI.js
2025-05-16 05:31:33.359 | GET | /css/open-iconic/font/css/open-iconic-bootstrap.min.css
2025-05-16 05:31:33.360 | GET | /_content/BootstrapBlazor.FontAwesome/css/all.min.css
2025-05-16 05:31:33.441 | GET | /_framework/blazor.boot.json
2025-05-16 05:31:33.490 | GET | /icon-512.png
2025-05-16 05:31:33.490 | GET | /favicon.ico
2025-05-16 05:31:33.586 | GET | /appsettings.json
2025-05-16 05:31:33.635 | GET | /_framework/dotnet.js

Client端

我们可以查看Client端的index.html中引用的文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>AWUI</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="AW.Client.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="_content/AWUI/css/AWUI.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
    <script src="js/scriptsInOne.js" type="module"></script>
    <script src="js/sidebarDrag.js" type="module"></script>
    <script src="js/themeToggle.js" type="module"></script>
    <script src="_content/AWUI/js/AWUI.js" type="module"></script>
</body>

</html>

在浏览器打开NetWork Monitor，查看请求资源：

环境

项目框架：

文章声明

_内容准确性：_我会尽力确保所分享信息的准确性和可靠性，但由于个人知识有限，难免会有疏漏或错误。如果您在阅读过程中发现任何问题，请不吝赐教，我将及时更正。

posted on 2025-05-16 13:02 wubing7755 阅读(46) 评论(0) 收藏举报

刷新页面返回顶部

wbBlog