React与C#中修复Lighthouse静态资源高效缓存策略问题

可能的问题点及修复步骤 #

1. 服务器端中间件顺序错误 #

UseStaticFiles 必须在路由、认证等中间件之前注册，否则静态文件请求可能不会触发 OnPrepareResponse 回调。同时建议用Set替换Append，避免重复添加头导致浏览器忽略：

// 先注册静态文件中间件
app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Set("Cache-Control", "public, max-age=31536000");
    }
});

// 再注册其他中间件
app.UseRouting();
app.UseAuthorization();
// ...其他中间件

2. 静态文件路径未正确匹配 #

如果静态资源（字体、SVG、JS）不在默认的wwwroot目录，需要指定FileProvider匹配对应路径：

using Microsoft.Extensions.FileProviders;

app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "YourStaticFolder")),
    RequestPath = "/static", // 对应静态资源的请求路径前缀
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Set("Cache-Control", "public, max-age=31536000");
    }
});

3. React代理配置无效 #

你的代理仅针对/api路径，但静态资源通常不会走/api前缀，代理中的缓存头设置根本不会触发。直接删除代理里这部分冗余配置，静态资源缓存交由服务器端处理即可。

4. IIS/web.config覆盖缓存设置 #

若部署在IIS上，检查web.config是否有<staticContent>配置覆盖了代码中的缓存头：

<!-- 若存在此类禁用缓存的配置，删除或调整 -->
<staticContent>
    <clientCache cacheControlMode="DisableCache" />
</staticContent>

也可以直接在web.config中配置静态资源缓存：

<staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
</staticContent>

5. 浏览器缓存干扰测试 #

测试时必须使用强制刷新（Ctrl+F5），或在开发者工具网络面板勾选「禁用缓存」，否则看到的是旧缓存的响应头。

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