Blazor 8多渲染模式下静态文件缓存清除方案问询

针对你遇到的浏览器缓存静态文件、无法即时看到CSS变更的问题，以下是适配SSR、Server、WASM、Auto所有渲染模式的解决方案，替代ASP.NET Core的asp-append-version标签助手：

方案1：使用原生FileVersionProvider自动生成版本号 #

这个方案和asp-append-version原理一致，通过计算文件哈希生成版本查询字符串，文件变更时自动更新，适配所有渲染模式。

步骤： #

1. 注册服务：在Program.cs中注入FileVersionProvider服务：

var builder = WebApplication.CreateBuilder(args);

// 添加静态文件服务
builder.Services.AddStaticFiles();

// 注入FileVersionProvider所需依赖
builder.Services.AddSingleton<IFileProvider>(sp =>
    new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")));
builder.Services.AddSingleton<FileVersionProvider>();

// 其他Blazor服务注册...
var app = builder.Build();

// 启用静态文件中间件
app.UseStaticFiles();

// 其他中间件配置...
app.Run();

2. 在App.razor中使用：注入服务并生成带版本的URL：

@inject FileVersionProvider FileVersionProvider
@inject IWebHostEnvironment Env

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blazor App</title>
    <!-- 自动追加版本号 -->
    <link href="@FileVersionProvider.AddFileVersionToPath(Env.WebRootPath, "/css/bargeh.css")" rel="stylesheet" />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

方案2：静态文件内容哈希命名（推荐生产环境使用） #

这个方案通过在发布时自动将静态文件重命名为包含内容哈希的文件名（如bargeh.[hash].css），从根本上避免缓存问题，浏览器会因为文件名不同自动下载新版本，适配所有模式。

步骤： #

1. 配置项目文件：在你的Blazor项目的.csproj文件中添加以下配置，启用静态文件哈希命名：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <!-- 其他配置 -->
  
  <PropertyGroup>
    <!-- 启用静态Web资产的版本哈希 -->
    <StaticWebAssetsVersion>$(AssemblyVersion)</StaticWebAssetsVersion>
    <GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest>
  </PropertyGroup>

  <!-- 其他配置 -->
</Project>

2. 在App.razor中引用原始文件：框架会自动在发布时将路径替换为带哈希的版本，开发环境仍使用原始文件名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blazor App</title>
    <!-- 直接引用原始文件名，发布时自动替换为带哈希的路径 -->
    <link href="css/bargeh.css" rel="stylesheet" />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

方案3：自定义组件封装版本逻辑 #

如果需要复用版本追加逻辑，可以封装成自定义组件，方便在整个项目中使用：

步骤： #

1. 创建StaticAssetLink.razor组件：

@inject FileVersionProvider FileVersionProvider
@inject IWebHostEnvironment Env

<link href="@GetVersionedPath(Path)" rel="stylesheet" />

@code {
    [Parameter]
    public string Path { get; set; } = string.Empty;

    private string GetVersionedPath(string path)
    {
        return FileVersionProvider.AddFileVersionToPath(Env.WebRootPath, path);
    }
}

2. 在App.razor中使用组件：

@using YourProjectNamespace.Components

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blazor App</title>
    <StaticAssetLink Path="/css/bargeh.css" />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

开发环境优化 #

开发时可以禁用浏览器缓存，或者在Program.cs中配置静态文件中间件的缓存策略：

app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        if (app.Environment.IsDevelopment())
        {
            // 开发环境禁用缓存
            ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
            ctx.Context.Response.Headers.Append("Pragma", "no-cache");
            ctx.Context.Response.Headers.Append("Expires", "0");
        }
    }
});

内容的提问来源于stack exchange，提问作者Matin