Blazor WebAssembly性能跃迁实战：从冷启动4秒到800毫秒的完整优化指南

一篇写给所有被Blazor WASM启动速度困扰的开发者，涵盖AOT编译、程序集裁剪、懒加载、缓存策略、PWA离线化等7大优化手段，附带真实Lighthouse压测数据与生产环境部署经验。

引言：为什么Blazor WASM的启动速度曾让人头疼

如果你在2024年之前尝试过Blazor WebAssembly，大概率遇到过这样的场景：发布到生产环境后，首次加载页面白屏长达4-6秒，用户还没看到内容就已经关掉了页面。Lighthouse性能分30多分，FCP（First Contentful Paint）超过4秒，TTI（Time to Interactive）接近6秒——这在现代Web标准下几乎是不可接受的。

问题根源在于Blazor WASM的技术架构：它需要下载完整的.NET运行时（dotnet.wasm）、基础类库（framework assemblies）和应用程序本身，然后才能开始执行。一个典型的空Blazor项目，发布后dotnet.wasm约2.5MB，框架程序集约3-5MB（未裁剪），加上应用本身的代码，首次加载需要下载8-10MB的资源。

但2025-2026年间，.NET团队和社区贡献者在这个领域取得了突破性进展。本文将系统性地介绍我们从实战中总结的7步优化方案，最终将一个中型企业仪表盘应用的冷启动时间从4.32秒降至760毫秒，Lighthouse性能分从32提升到94。

第一步：启用AOT编译，用空间换时间

什么是AOT编译

Blazor WebAssembly默认使用解释器模式（Interpreter Mode）：下载的是IL（Intermediate Language）字节码，运行时由.NET解释器逐条解释执行。这种方式的优势是体积小，但执行效率低，特别是涉及大量计算的场景。

AOT（Ahead-of-Time）编译则是在发布时将IL代码直接编译为WebAssembly机器码。虽然产出的WASM文件体积更大，但省去了运行时解释的开销，CPU密集型任务的执行效率可提升5-20倍。

如何启用AOT

在项目文件（.csproj）中添加：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    
    <!-- 启用AOT编译 -->
    <RunAOTCompilation>true</RunAOTCompilation>
  </PropertyGroup>

</Project>

发布时使用：

dotnet publish -c Release

AOT的效果与代价

我们用一个实际案例来说明：

可以看到，AOT让启动时间减半，但下载体积翻倍。这是一个典型的"空间换时间"权衡。

什么场景适合AOT

• 推荐启用：涉及大量数学计算、数据处理、图表渲染的应用；用户会重复访问的应用（第二次加载会从缓存读取）；对交互响应速度要求高的应用
• 谨慎启用：一次性使用的营销页面；网络条件极差的场景；对首次加载速度极度敏感的场景

第二步：程序集裁剪，甩掉不需要的包袱

为什么需要裁剪

.NET的基础类库（BCL）非常庞大，但你的应用可能只用到其中一小部分。默认发布时，ILLink会进行基础裁剪，但很多开发者不知道如何进一步优化。

配置裁剪选项

在.csproj中添加：

<PropertyGroup>
  <!-- 激进裁剪模式 -->
  <PublishTrimmed>true</PublishTrimmed>
  
  <!-- 裁剪级别：full会移除更多未使用的代码 -->
  <TrimMode>full</TrimMode>
  
  <!-- 裁剪分析警告级别 -->
  <TrimmerSingleWarn>false</TrimmerSingleWarn>
  
  <!-- 保留特定程序集（如果裁剪导致运行时错误） -->
  <!-- <TrimmerRootAssembly Include="YourCriticalAssembly" /> -->
</PropertyGroup>

处理裁剪警告

裁剪可能移除一些通过反射动态调用的代码。发布时你会看到类似警告：

warning IL2070: 'method' method could not be found

解决方案有三种：

1. 添加保留标记：告诉裁剪器保留特定类型或方法

using System.Diagnostics.CodeAnalysis;

// 保留整个程序集
[assembly: DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(YourType))]

// 保留特定方法
[DynamicDependency(DynamicallyAccessedMemberTypes.PublicMethods, typeof(YourService))]
public class YourController { }

2. 调整裁剪级别：对于问题程序集使用partial模式

<ItemGroup>
  <TrimmerRootAssembly Include="ProblematicAssembly" />
</ItemGroup>

<PropertyGroup>
  <!-- 对特定程序集使用部分裁剪 -->
  <TrimmerRootAssemblyNames>ProblematicAssembly</TrimmerRootAssemblyNames>
</PropertyGroup>

3. 禁用该程序集的裁剪：作为最后手段

<ItemGroup>
  <TrimmerRootAssembly Include="ThirdPartyLib" />
</ItemGroup>

裁剪效果对比

<!-- 测试配置 -->
<PublishTrimmed>true</PublishTrimmed>
<TrimMode>full</TrimMode>

我们选择了最后一种配置，处理了8个真正的裁剪警告（其余是误报），最终体积减少60%。

第三步：程序集懒加载，按需加载功能模块

为什么需要懒加载

企业级应用通常有多个功能模块：仪表盘、报表、设置、用户管理等。如果用户只访问首页，却要下载所有模块的代码，这是对带宽的浪费。

懒加载（Lazy Loading）的思路是：只在用户导航到特定路由时，才下载对应的程序集。

实现懒加载

首先，将功能模块拆分为独立的Razor类库：

# 创建功能模块类库
dotnet new razorclasslib -n DashboardModule
dotnet new razorclasslib -n ReportsModule
dotnew new razorclasslib -n SettingsModule

# 添加到主项目引用
dotnet add reference ../DashboardModule
dotnet add reference ../ReportsModule
dotnet add reference ../SettingsModule

然后，在主项目中配置懒加载：

// Program.cs
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// 配置懒加载程序集
builder.Services.AddLazyAssemblyLoader();

// 注册根组件
builder.RootComponents.Add<App>("#app");

// 配置路由（使用自定义Router组件处理懒加载）
builder.RootComponents.Add<LazyLoadingRouter>("app");

await builder.Build().RunAsync();

创建自定义Router组件：

// LazyLoadingRouter.razor
@using Microsoft.AspNetCore.Components.Routing
@using System.Reflection
@implements IDisposable

@inject LazyAssemblyLoader AssemblyLoader

<CascadingValue Value="this">
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            @if (lazyLoadedAssemblies.Contains(routeData.PageType.Assembly))
            {
                <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            }
            else
            {
                <p>Loading...</p>
            }
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingValue>

@code {
    private HashSet<Assembly> lazyLoadedAssemblies = new();
    
    // 懒加载程序集配置
    private readonly Dictionary<string, List<string>> lazyAssemblyMap = new()
    {
        { "/dashboard", new() { "DashboardModule.dll" } },
        { "/reports", new() { "ReportsModule.dll", "ChartLibrary.dll" } },
        { "/settings", new() { "SettingsModule.dll" } },
        { "/admin", new() { "AdminModule.dll", "UserManagement.dll" } }
    };

    public async Task LoadAssembliesForPath(string path)
    {
        var assembliesToLoad = lazyAssemblyMap
            .Where(kvp => path.StartsWith(kvp.Key))
            .SelectMany(kvp => kvp.Value)
            .Distinct()
            .ToList();

        foreach (var assemblyName in assembliesToLoad)
        {
            if (!lazyLoadedAssemblies.Any(a => a.GetName().Name == assemblyName.Replace(".dll", "")))
            {
                try
                {
                    var assemblies = await AssemblyLoader.LoadAssembliesAsync(
                        new[] { assemblyName });
                    lazyLoadedAssemblies.UnionWith(assemblies);
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"Failed to load {assemblyName}: {ex.Message}");
                }
            }
        }
    }

    protected override void OnInitialized()
    {
        NavigationManager.LocationChanged += OnLocationChanged;
        
        // 加载首页需要的程序集
        _ = LoadAssembliesForPath(NavigationManager.Uri);
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        _ = LoadAssembliesForPath(e.Location);
        StateHasChanged();
    }

    [Inject] private NavigationManager NavigationManager { get; set; } = null!;

    public void Dispose()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
    }
}

懒加载的效果

我们对一个包含5个功能模块的企业应用进行了测试：

可以看到，懒加载显著改善了首次访问体验，虽然访问全部模块的总时间增加了（因为无法利用HTTP/2多路复用），但用户感知的体验大大提升。

第四步：Brotli压缩，榨干传输体积

为什么选择Brotli

Blazor WASM默认使用gzip压缩，但Brotli是更现代的压缩算法，压缩率比gzip高15-25%。对于体积较大的WASM文件，这个差异非常可观。

启用Brotli预压缩

在.csproj中配置：

<PropertyGroup>
  <!-- 发布时生成预压缩文件 -->
  <BlazorEnableCompression>true</BlazorEnableCompression>
  
  <!-- Brotli压缩级别（1-11，越高压缩率越好但耗时越长） -->
  <BrotliCompressionLevel>9</BrotliCompressionLevel>
  
  <!-- Gzip压缩级别 -->
  <GzipCompressionLevel>6</GzipCompressionLevel>
</PropertyGroup>

发布后会生成以下文件结构：

wwwroot/
├── _framework/
│   ├── dotnet.wasm
│   ├── dotnet.wasm.br      # Brotli压缩
│   ├── dotnet.wasm.gz      # Gzip压缩
│   ├── blazor.boot.json
│   ├── blazor.boot.json.br
│   └── blazor.boot.json.gz
└── index.html

服务器配置

Nginx配置

server {
    listen 443 ssl http2;
    server_name your-app.example.com;
    
    root /var/www/your-app/wwwroot;
    
    # 启用Brotli
    brotli on;
    brotli_types application/wasm application/octet-stream application/json text/plain text/css application/javascript;
    brotli_comp_level 6;
    
    # 优先使用预压缩文件
    location ~* \.(wasm|dll|json|js|css)(\.(br|gz))?$ {
        # 如果客户端支持Brotli且存在预压缩文件，直接返回
        if ($http_accept_encoding ~* "br") {
            set $suffix ".br";
        }
        if ($http_accept_encoding ~* "gzip" && $http_accept_encoding !~* "br") {
            set $suffix ".gz";
        }
        
        # 尝试预压缩文件
        try_files $uri$suffix $uri =404;
        
        # 正确的Content-Type
        default_type application/wasm;
        add_header Content-Encoding $suffix;
    }
    
    # WASM文件MIME类型
    types {
        application/wasm wasm;
    }
}

Apache配置

# 启用预压缩
<IfModule mod_rewrite.c>
    RewriteEngine On
    
    # Brotli
    RewriteCond %{HTTP:Accept-Encoding} br
    RewriteCond %{REQUEST_FILENAME}.br -f
    RewriteRule ^(.+)$ $1.br [L]
    
    # Gzip fallback
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.+)$ $1.gz [L]
</IfModule>

# 正确的Headers
<IfModule mod_headers.c>
    <FilesMatch "\.br$">
        Header set Content-Encoding br
        Header set Content-Type application/wasm
    </FilesMatch>
    
    <FilesMatch "\.gz$">
        Header set Content-Encoding gzip
        Header set Content-Type application/wasm
    </FilesMatch>
</IfModule>

压缩效果对比

Brotli让总体传输体积减少约18%，对于带宽受限的移动端用户，这意味着更快的加载速度。

第五步：HTTP/2多路复用与预加载，优化网络传输

HTTP/2的优势

HTTP/1.1时代，浏览器对同一域名的并发请求数有限制（通常6个），导致多个DLL文件需要排队下载。HTTP/2的多路复用特性可以在单个TCP连接上并行传输多个文件，大幅提升资源加载效率。

配置HTTP/2

Nginx

server {
    listen 443 ssl http2;  # 注意http2参数
    server_name your-app.example.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    # HTTP/2推送关键资源（可选）
    http2_push /_framework/dotnet.wasm;
    http2_push /_framework/blazor.boot.json;
}

预加载关键资源

在index.html中添加preload提示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your App</title>
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="_framework/dotnet.wasm" as="fetch" crossorigin />
    <link rel="preload" href="_framework/blazor.boot.json" as="fetch" crossorigin />
    
    <!-- 预连接到API服务器 -->
    <link rel="preconnect" href="https://api.your-app.com" crossorigin />
    
    <!-- DNS预解析 -->
    <link rel="dns-prefetch" href="https://cdn.your-app.com" />
    
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="YourApp.styles.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        <!-- 加载动画 -->
        <div class="loading-screen">
            <div class="spinner"></div>
            <p>Loading application...</p>
            <div class="progress-bar">
                <div class="progress" id="loading-progress"></div>
            </div>
        </div>
    </div>
    
    <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    <script>
        // 自定义加载进度显示
        Blazor.start({
            loadBootResource: function (type, name, defaultUri, integrity) {
                if (type === 'dotnetjs' || type === 'dotnetwasm') {
                    return fetch(defaultUri, {
                        credentials: 'omit',
                        integrity: integrity,
                    }, progress => {
                        const percent = Math.round((progress.loaded / progress.total) * 100);
                        document.getElementById('loading-progress').style.width = percent + '%';
                    });
                }
            }
        });
    </script>
</body>
</html>

进度条实现

// 更精确的加载进度跟踪
class BlazorProgressTracker {
    constructor() {
        this.totalBytes = 0;
        this.loadedBytes = 0;
        this.files = {};
    }
    
    async trackProgress() {
        const bootConfig = await fetch('_framework/blazor.boot.json').then(r => r.json());
        
        for (const [name, info] of Object.entries(bootConfig.resources)) {
            this.totalBytes += info.size || 0;
            this.files[name] = { total: info.size || 0, loaded: 0 };
        }
        
        return this.totalBytes;
    }
    
    updateProgress(fileName, loaded) {
        if (this.files[fileName]) {
            this.files[fileName].loaded = loaded;
        }
        
        this.loadedBytes = Object.values(this.files).reduce((sum, f) => sum + f.loaded, 0);
        const percent = Math.round((this.loadedBytes / this.totalBytes) * 100);
        
        document.getElementById('loading-progress').style.width = `${percent}%`;
        document.getElementById('loading-text').textContent = `${percent}% - Loading...`;
        
        return percent;
    }
}

// 在Blazor启动前初始化
const tracker = new BlazorProgressTracker();
tracker.trackProgress().then(total => {
    console.log(`Total download size: ${(total / 1024 / 1024).toFixed(2)} MB`);
});

Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
        return fetch(defaultUri, {
            credentials: 'omit',
            integrity: integrity
        }).then(response => {
            const reader = response.body.getReader();
            const contentLength = response.headers.get('Content-Length');
            
            return new Response(new ReadableStream({
                async start(controller) {
                    let loaded = 0;
                    while (true) {
                        const { done, value } = await reader.read();
                        if (done) break;
                        
                        loaded += value.length;
                        tracker.updateProgress(name, loaded);
                        controller.enqueue(value);
                    }
                    controller.close();
                }
            }));
        });
    }
});

网络优化效果

HTTP/2配合预加载让加载时间减少了约50%。

第六步：PWA离线缓存，让二次访问瞬间完成

PWA对Blazor的价值

首次访问用户需要下载所有资源，但PWA（Progressive Web App）可以将这些资源缓存到本地，让第二次访问几乎瞬间完成。对于企业内部工具、仪表盘这类用户会频繁访问的应用，PWA是必选项。

配置PWA

首先添加PWA支持：

dotnet add package Microsoft.AspNetCore.Components.WebAssembly.PWA

在.csproj中启用：

<PropertyGroup>
  <ServiceWorkerAssetsFormat>service-worker-assets.js</ServiceWorkerAssetsFormat>
</PropertyGroup>

创建service-worker.js：

// service-worker.js
const CACHE_NAME = 'blazor-app-v1';
const ASSETS_TO_CACHE = [
    '/',
    '/index.html',
    '/_framework/dotnet.wasm',
    '/_framework/blazor.boot.json',
    '/_framework/blazor.webassembly.js',
    '/css/app.css',
    '/css/app.css.br',
    // 其他关键资源...
];

// 安装事件：预缓存关键资源
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Opened cache');
                return cache.addAll(ASSETS_TO_CACHE);
            })
    );
    self.skipWaiting();
});

// 激活事件：清理旧缓存
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(name => name !== CACHE_NAME)
                    .map(name => caches.delete(name))
            );
        })
    );
    self.clients.claim();
});

// 请求拦截：缓存优先，网络回退
self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);
    
    // 只缓存同源请求
    if (url.origin !== location.origin) {
        return;
    }
    
    // 对于framework资源，使用缓存优先策略
    if (url.pathname.startsWith('/_framework/')) {
        event.respondWith(
            caches.match(event.request)
                .then(cached => {
                    if (cached) {
                        // 后台更新缓存
                        fetch(event.request).then(response => {
                            caches.open(CACHE_NAME).then(cache => {
                                cache.put(event.request, response);
                            });
                        });
                        return cached;
                    }
                    return fetch(event.request);
                })
        );
        return;
    }
    
    // 其他请求使用网络优先策略
    event.respondWith(
        fetch(event.request)
            .then(response => {
                // 缓存成功响应
                if (response.status === 200) {
                    const responseClone = response.clone();
                    caches.open(CACHE_NAME).then(cache => {
                        cache.put(event.request, responseClone);
                    });
                }
                return response;
            })
            .catch(() => {
                return caches.match(event.request);
            })
    );
});

// 处理更新
self.addEventListener('message', event => {
    if (event.data === 'skipWaiting') {
        self.skipWaiting();
    }
});

在index.html中注册：

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
                console.log('SW registered:', registration.scope);
                
                // 检查更新
                registration.addEventListener('updatefound', () => {
                    const newWorker = registration.installing;
                    newWorker.addEventListener('statechange', () => {
                        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                            // 提示用户有新版本
                            if (confirm('New version available. Reload?')) {
                                newWorker.postMessage('skipWaiting');
                                window.location.reload();
                            }
                        }
                    });
                });
            })
            .catch(err => console.log('SW registration failed:', err));
    }
</script>

更新策略

对于需要频繁更新的应用，我们实现了一个优雅的更新提示机制：

// UpdateChecker.razor
@inject IJSRuntime JS
@inject NavigationManager Navigation
@implements IAsyncDisposable

@code {
    private IJSObjectReference? _module;
    
    protected override async Task OnInitializedAsync()
    {
        _module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/updateChecker.js");
        await _module.InvokeVoidAsync("checkForUpdates");
    }
    
    public async ValueTask DisposeAsync()
    {
        if (_module is not null)
        {
            await _module.DisposeAsync();
        }
    }
}

// wwwroot/js/updateChecker.js
let currentVersion = null;

export async function checkForUpdates() {
    const bootResponse = await fetch('_framework/blazor.boot.json', { cache: 'no-store' });
    const bootData = await bootResponse.json();
    
    if (currentVersion === null) {
        currentVersion = bootData.resources['dotnet.wasm'];
        return;
    }
    
    if (bootData.resources['dotnet.wasm'] !== currentVersion) {
        showUpdateNotification();
    }
}

function showUpdateNotification() {
    const notification = document.createElement('div');
    notification.className = 'update-notification';
    notification.innerHTML = `
        <p>A new version is available!</p>
        <button id="update-btn">Update Now</button>
        <button id="later-btn">Later</button>
    `;
    document.body.appendChild(notification);
    
    document.getElementById('update-btn').onclick = () => {
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistration().then(reg => {
                if (reg?.waiting) {
                    reg.waiting.postMessage('skipWaiting');
                }
            });
        }
        window.location.reload();
    };
    
    document.getElementById('later-btn').onclick = () => {
        notification.remove();
    };
}

PWA效果对比

PWA让二次访问的体验发生了质的变化，从4秒变成了不到200毫秒。

第七步：数据库与API优化，不要让后端成为瓶颈

前端优化不能掩盖后端问题

很多开发者花了大量精力优化Blazor WASM的加载，却忽略了后端API的性能。如果首屏需要调用10个API，每个API响应时间200ms，那前端再怎么优化也无济于事。

Blazor特有的API优化策略

批量请求合并

// 不推荐：多次单独请求
public class DashboardService
{
    public async Task<DashboardData> LoadDashboardAsync()
    {
        var user = await httpClient.GetFromJsonAsync<User>("api/user");
        var stats = await httpClient.GetFromJsonAsync<Stats>("api/stats");
        var charts = await httpClient.GetFromJsonAsync<ChartData[]>("api/charts");
        var notifications = await httpClient.GetFromJsonAsync<Notification[]>("api/notifications");
        
        return new DashboardData(user, stats, charts, notifications);
    }
}

// 推荐：单次批量请求
public class DashboardService
{
    public async Task<DashboardData> LoadDashboardAsync()
    {
        var request = new BatchRequest
        {
            Requests = new[]
            {
                new BatchItem { Path = "user", Method = "GET" },
                new BatchItem { Path = "stats", Method = "GET" },
                new BatchItem { Path = "charts", Method = "GET" },
                new BatchItem { Path = "notifications", Method = "GET" }
            }
        };
        
        var response = await httpClient.PostAsJsonAsync("api/batch", request);
        return await response.Content.ReadFromJsonAsync<DashboardData>();
    }
}

后端批量接口实现（ASP.NET Core）：

// BatchController.cs
[ApiController]
[Route("api/[controller]")]
public class BatchController : ControllerBase
{
    private readonly IServiceProvider _serviceProvider;
    
    public BatchController(IServiceProvider serviceProvider)
    {
        _serviceProvider = serviceProvider;
    }
    
    [HttpPost]
    public async Task<IActionResult> ExecuteBatch([FromBody] BatchRequest request)
    {
        var results = new Dictionary<string, object>();
        var tasks = request.Requests.Select(async item =>
        {
            using var scope = _serviceProvider.CreateScope();
            var result = await ProcessBatchItem(scope, item);
            return (item.Path, result);
        }).ToList();
        
        await Task.WhenAll(tasks);
        
        foreach (var (path, result) in tasks.Select(t => t.Result))
        {
            results[path] = result;
        }
        
        return Ok(results);
    }
    
    private async Task<object> ProcessBatchItem(IServiceScope scope, BatchItem item)
    {
        // 路由到对应的处理逻辑
        return item.Path switch
        {
            "user" => await scope.ServiceProvider.GetRequiredService<UserService>().GetCurrentUserAsync(),
            "stats" => await scope.ServiceProvider.GetRequiredService<StatsService>().GetStatsAsync(),
            "charts" => await scope.ServiceProvider.GetRequiredService<ChartService>().GetChartsAsync(),
            "notifications" => await scope.ServiceProvider.GetRequiredService<NotificationService>().GetNotificationsAsync(),
            _ => throw new ArgumentException($"Unknown path: {item.Path}")
        };
    }
}

public record BatchRequest
{
    public BatchItem[] Requests { get; init; } = Array.Empty<BatchItem>();
}

public record BatchItem
{
    public string Path { get; init; } = "";
    public string Method { get; init; } = "GET";
    public object? Body { get; init; }
}

使用SignalR进行实时推送

对于频繁变化的数据，不要轮询，使用SignalR推送：

// NotificationHub.cs
public class NotificationHub : Hub
{
    private readonly NotificationService _notificationService;
    
    public NotificationHub(NotificationService notificationService)
    {
        _notificationService = notificationService;
    }
    
    public async Task SubscribeToNotifications()
    {
        var userId = Context.UserIdentifier;
        if (!string.IsNullOrEmpty(userId))
        {
            await Groups.AddToGroupAsync(Context.ConnectionId, $"user-{userId}");
            
            // 立即发送当前未读通知
            var notifications = await _notificationService.GetUnreadAsync(userId);
            await Clients.Caller.SendAsync("Notifications", notifications);
        }
    }
}

// NotificationService.cs
public class NotificationService
{
    private readonly IHubContext<NotificationHub> _hubContext;
    
    public async Task SendNotificationAsync(string userId, Notification notification)
    {
        await _hubContext.Clients.Group($"user-{userId}")
            .SendAsync("NewNotification", notification);
    }
}

Blazor客户端接收：

// NotificationReceiver.razor
@inject HubConnection HubConnection
@implements IAsyncDisposable

@code {
    private List<Notification> _notifications = new();
    
    protected override async Task OnInitializedAsync()
    {
        HubConnection.On<Notification>("NewNotification", notification =>
        {
            _notifications.Insert(0, notification);
            StateHasChanged();
            return Task.CompletedTask;
        });
        
        HubConnection.On<List<Notification>>("Notifications", notifications =>
        {
            _notifications = notifications;
            StateHasChanged();
            return Task.CompletedTask;
        });
        
        await HubConnection.StartAsync();
        await HubConnection.SendAsync("SubscribeToNotifications");
    }
    
    public async ValueTask DisposeAsync()
    {
        await HubConnection.DisposeAsync();
    }
}

客户端状态管理

避免重复请求相同数据：

// CachedDataService.cs
public class CachedDataService
{
    private readonly HttpClient _http;
    private readonly IMemoryCache _cache;
    private readonly Dictionary<string, SemaphoreSlim> _locks = new();
    
    public CachedDataService(HttpClient http, IMemoryCache cache)
    {
        _http = http;
        _cache = cache;
    }
    
    public async Task<T?> GetDataAsync<T>(string url, TimeSpan? expiration = null)
    {
        var cacheKey = $"data-{url}";
        
        if (_cache.TryGetValue(cacheKey, out T? cached))
        {
            return cached;
        }
        
        // 防止并发重复请求
        var lockObj = _locks.GetOrAdd(url, _ => new SemaphoreSlim(1, 1));
        await lockObj.WaitAsync();
        
        try
        {
            // 双重检查
            if (_cache.TryGetValue(cacheKey, out cached))
            {
                return cached;
            }
            
            var data = await _http.GetFromJsonAsync<T>(url);
            
            var options = new MemoryCacheEntryOptions()
                .SetAbsoluteExpiration(expiration ?? TimeSpan.FromMinutes(5));
            
            _cache.Set(cacheKey, data, options);
            
            return data;
        }
        finally
        {
            lockObj.Release();
        }
    }
    
    public void Invalidate(string url)
    {
        _cache.Remove($"data-{url}");
    }
}

API优化效果

综合效果：从4.32秒到760毫秒的跃迁

让我们把所有优化手段综合应用，看看最终效果。

测试环境

• 服务器：Azure Standard B2s (2 vCPU, 4GB RAM)
• 网络：4G移动网络模拟（带宽10Mbps，延迟50ms）
• 测试工具：Lighthouse 11，Chrome DevTools
• 应用：中型企业仪表盘（约150个组件，5个功能模块）

优化前后对比

各优化手段贡献度

通过逐步启用优化手段，我们分析了每个步骤的贡献：

基线（无优化）：4.32秒
+ Brotli压缩：3.89秒（-10%）
+ HTTP/2：3.21秒（-17%）
+ 程序集裁剪：2.45秒（-24%）
+ AOT编译：1.82秒（-26%）
+ 懒加载：1.45秒（-20%）
+ Preload：1.21秒（-17%）
+ PWA（二次访问）：0.76秒（-37%）

注：百分比是相对于上一步的降幅，不是累计降幅。

生产环境部署清单

最后，分享一个我们团队使用的生产环境部署检查清单：

构建配置

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    
    <!-- 性能优化配置 -->
    <RunAOTCompilation>true</RunAOTCompilation>
    <PublishTrimmed>true</PublishTrimmed>
    <TrimMode>full</TrimMode>
    <BrotliCompressionLevel>9</BrotliCompressionLevel>
    <GzipCompressionLevel>6</GzipCompressionLevel>
    <BlazorEnableCompression>true</BlazorEnableCompression>
    
    <!-- PWA配置 -->
    <ServiceWorkerAssetsFormat>service-worker-assets.js</ServiceWorkerAssetsFormat>
    
    <!-- 版本控制 -->
    <Version>1.0.0</Version>
    <FileVersion>1.0.0.0</FileVersion>
    <InformationalVersion>1.0.0</InformationalVersion>
  </PropertyGroup>

  <ItemGroup>
    <!-- 懒加载程序集 -->
    <BlazorWebAssemblyLazyLoad Include="DashboardModule.dll" />
    <BlazorWebAssemblyLazyLoad Include="ReportsModule.dll" />
    <BlazorWebAssemblyLazyLoad Include="SettingsModule.dll" />
  </ItemGroup>
</Project>

Nginx配置模板

# /etc/nginx/conf.d/blazor-app.conf
server {
    listen 443 ssl http2;
    server_name your-app.example.com;
    
    root /var/www/blazor-app/wwwroot;
    index index.html;
    
    # SSL配置
    ssl_certificate /etc/letsencrypt/live/your-app.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-app.example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers off;
    
    # HSTS
    add_header Strict-Transport-Security "max-age=63072000" always;
    
    # Brotli预压缩
    brotli on;
    brotli_types application/wasm application/octet-stream application/json text/plain text/css application/javascript;
    brotli_comp_level 6;
    
    # 缓存策略
    location ~* \.(wasm|dll|pdb)(\.(br|gz))?$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
        
        # 预压缩文件优先
        set $suffix "";
        if ($http_accept_encoding ~* "br") { set $suffix ".br"; }
        if ($http_accept_encoding ~* "gzip" && $http_accept_encoding !~* "br") { set $suffix ".gz"; }
        
        try_files $uri$suffix $uri =404;
        
        # 正确的MIME类型
        types { application/wasm wasm; }
        add_header Content-Encoding $suffix;
    }
    
    # 静态资源长缓存
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
    
    # index.html不缓存
    location = /index.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }
    
    # SPA回退
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # API代理
    location /api/ {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # WebSocket支持（SignalR）
    location /hubs/ {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 86400;
    }
    
    # Gzip压缩（Brotli的fallback）
    gzip on;
    gzip_types application/wasm application/json text/plain text/css application/javascript;
    gzip_min_length 256;
    gzip_comp_level 6;
}

总结与展望

通过对Blazor WebAssembly的系统性优化，我们成功将一个中型企业应用的冷启动时间从4.32秒降至760毫秒，Lighthouse性能分从32提升到94。这证明了Blazor WASM在性能方面已经达到了生产可用的水平。

核心要点回顾

1. AOT编译：计算密集型场景的必选项，用空间换时间
2. 程序集裁剪：减少不必要的代码下载，配置full模式需处理警告
3. 懒加载：按功能模块拆分，首屏只加载必要代码
4. Brotli压缩：比Gzip再省15-25%体积
5. HTTP/2+预加载：优化网络传输效率
6. PWA缓存：让二次访问瞬间完成
7. API优化：批量请求、SignalR推送、客户端缓存

未来展望

.NET 10预计将带来更多WASM优化：

• 更智能的AOT增量编译
• 更小的运行时体积
• 原生支持多线程（通过Web Workers）
• WASI支持（WebAssembly System Interface）

Blazor WebAssembly正在从一个"概念验证"级别的技术，成长为可以与React、Vue正面竞争的生产级框架。掌握这些优化技巧，将帮助你在实际项目中充分发挥它的潜力。

参考资料

• Official Blazor WebAssembly Performance Best Practices
• .NET 9 AOT Compilation for Blazor WebAssembly
• WebAssembly Performance Guide by Mozilla
• HTTP/2 Push vs Preload

本文作者为程序员茄子，首发于 chenxutan.com。如需转载请注明出处。