如何为Blazor Web Assembly实现Cache Busting缓存失效策略

方法1：使用ASP.NET Core内置版本附加标签助手（托管式WASM适用） #

如果你的Blazor WASM项目是托管在ASP.NET Core后端的，直接给资源标签添加asp-append-version="true"属性即可。框架会自动根据文件内容计算哈希值，追加到资源URL的查询参数中，文件内容修改后哈希会自动更新，触发浏览器拉取新资源：

<link href="css/site.min.css" rel="stylesheet" asp-append-version="true" />
<link href="CompnayName.ProjectName.Client.styles.css" rel="stylesheet" asp-append-version="true" />
<script src="js/shared/shared.min.js" asp-append-version="true"></script>

注意：启用该特性需要将index.html改为Razor页面（重命名为Index.cshtml放到后端项目的Pages目录下，或配置静态文件处理支持Razor标签解析）

方法2：构建时自动注入资源哈希（独立部署WASM适用） #

如果你的Blazor WASM是独立部署、不依赖ASP.NET Core后端的，可以在构建流程中增加自动替换资源路径的逻辑：

• 用Gulp、Webpack、Vite等前端构建工具，读取静态资源的内容计算哈希值，将index.html里的资源路径自动替换为带哈希参数的形式，例如css/site.min.css?v=abc123
• 也可以直接用适配Blazor的第三方NuGet包，配置后发布时会自动完成哈希追加操作，不需要额外写构建脚本

方法3：配合服务器缓存规则做全局优化 #

不管用上面哪种方案，都建议同步调整服务器的缓存策略，兼顾更新及时性和加载性能：

• 对入口文件index.html设置Cache-Control: no-cache，保证浏览器每次都会请求最新的入口内容，不会长期缓存该文件
• 对带哈希后缀的JS、CSS、图片等静态资源，设置Cache-Control: public,max-age=31536000,immutable，配置一年的长期缓存，只有资源哈希变化时才会触发重新请求

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