ASP.NET 核心 Blazor 效能最佳做法

Blazor 在最現實的應用程式 UI 案例中，已針對高效能進行優化。 不過，最佳效能取決於採用正確模式和功能的開發人員。

備註

此文章節點中的程式代碼範例採用可為 Null 的參考型別（NRT）和 .NET 編譯器的 Null 狀態靜態分析，這些技術在 .NET 6 或更新版本的 ASP.NET Core 中受到支援。

預先編譯 (AOT)

預先編譯（AOT）會將 Blazor 應用程式的 .NET 程式代碼直接編譯成原生 WebAssembly，以供瀏覽器直接執行。 AOT 編譯的應用程式會導致較大型的應用程式需要較長的時間才能下載，但 AOT 編譯的應用程式通常會提供更好的運行時間效能，特別是針對執行 CPU 密集工作的應用程式。 如需詳細資訊，請參閱 ASP.NET Core Blazor WebAssembly 建置工具和預先 (AOT) 編譯。

計量和追蹤

計量和追蹤功能可協助您監視和診斷應用程式效能、追蹤用戶互動，以及了解生產環境中的元件行為。

設定

若要在您的應用程式中啟用Blazor計量和追蹤，請在註冊服務的應用程式檔案中，使用下列計量和活動來源來設定 Program：

builder.Services.ConfigureOpenTelemetryMeterProvider(meterProvider =>
{
    meterProvider.AddMeter("Microsoft.AspNetCore.Components");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Lifecycle");
    meterProvider.AddMeter("Microsoft.AspNetCore.Components.Server.Circuits");
});

builder.Services.ConfigureOpenTelemetryTracerProvider(tracerProvider =>
{
    tracerProvider.AddSource("Microsoft.AspNetCore.Components");
    tracerProvider.AddSource("Microsoft.AspNetCore.Components.Server.Circuits");
});

效能計量

如需下列效能計量的詳細資訊，請參閱 ASP.NET Core 內建計量。

Microsoft.AspNetCore.Components 米：

• aspnetcore.components.navigate：追蹤應用程式中的路由變更總數。
• aspnetcore.components.handle_event.duration：測量處理瀏覽器事件的持續時間，包括商業規則。

Microsoft.AspNetCore.Components.Lifecycle 米：

• aspnetcore.components.update_parameters.duration：測量元件參數處理的持續時間，包括商業邏輯。
• aspnetcore.components.render_diff.duration：追蹤轉譯批次的持續時間。
• aspnetcore.components.render_diff.size：追蹤渲染批次的大小。

Microsoft.AspNetCore.Components.Server.Circuits 米：

在伺服器端 Blazor 應用程式中，其他線路特定計量包括：

• aspnetcore.components.circuit.active：顯示目前在記憶體中的使用中線路數目。
• aspnetcore.components.circuit.connected：追蹤連線到客戶端的線路數目。
• aspnetcore.components.circuit.duration：測量線路存留期持續時間，並提供總線路計數。

Blazor 追踪

如需下列追蹤活動的詳細資訊，請參閱 ASP.NET 核心內建計量。

新的活動追蹤功能會 Microsoft.AspNetCore.Components 使用活動來源，並提供三種主要類型的追蹤活動：線路生命週期、導覽和事件處理。

線路生命周期追蹤：

Microsoft.AspNetCore.Components.StartCircuit：使用 格式 Circuit {circuitId}追蹤線路初始化。

標籤：

• aspnetcore.components.circuit.id：唯一線路標識碼。
• error.type：例外狀況類型完整名稱（選擇性）

連結：

• HTTP 追蹤
• SignalR 追蹤

使用方式：將相同會話/線路的其他 Blazor 追蹤連結至 HTTP 和 SignalR 內容。

導覽追蹤：

Microsoft.AspNetCore.Components.Navigate：使用 格式 Route {route} -> {componentType}追蹤路由變更。

標籤：

• aspnetcore.components.route：頁面的 URL 路徑模式。
• aspnetcore.components.type：元件的類別名稱 Razor 。
• error.type：例外狀況類型完整名稱（選擇性）。

連結：

• HTTP 追蹤
• SignalR 追蹤
• 線路追蹤

使用情況：這個會話瀏覽了哪些頁面？Blazor

事件處理追蹤：

Microsoft.AspNetCore.Components.HandleEvent：以Event {attributeName} -> {componentType}.{methodName}的格式追蹤事件處理。

標籤：

• aspnetcore.components.attribute.name：觸發事件的 HTML 屬性名稱（範例： onClick）。
• code.function.name：處理程式的 C# 方法名稱。
• aspnetcore.components.type：接收事件的目標 C# 元件完整名稱。
• error.type：例外狀況類型完整名稱（選擇性）。

連結：

• 線路追蹤
• 路由追蹤

用法：

• 點一下查看是哪個元件在什麼頁面引發了例外狀況？
• 在哪一個連接電路中，和在什麼 HTTP 上下文中發生？