如何解决Angular应用浏览器缓存问题？构建文件带hash仍需清缓存

• 入口文件index.html被浏览器缓存：这是最常见的诱因。Angular所有带hash的构建资源的引用路径都写在index.html里，只要浏览器缓存了旧版的index.html，就会一直加载旧hash对应的静态资源，哪怕新的带hash资源已经部署到服务器也不会被用到。
• 服务端缓存规则配置错误：如果Web服务器给index.html配置了过长的强制缓存时间，没有设置协商缓存或者不缓存规则，用户浏览器会在缓存有效期内直接使用本地的旧index.html文件。
• Service Worker缓存干扰：如果你的Angular应用开启了PWA功能，Service Worker会自行缓存静态资源，即使文件名hash变化，未更新的Service Worker仍可能返回旧的缓存资源。
• 构建配置异常：虽然ng build --prod默认开启全量资源hash，但如果angular.json中被手动修改了outputHashing配置为非all值，可能出现部分资源不带hash、更新后文件名不变的情况。

• 配置Web服务器的差异化缓存规则：
  • 对index.html设置强制不缓存的响应头：

    Cache-Control: no-cache, no-store, must-revalidate
    Pragma: no-cache
    Expires: 0
    

  • 对带hash的js、css、图片、字体等静态资源设置长期缓存规则：

    Cache-Control: public, max-age=31536000, immutable
    

    这类资源hash随内容变化，文件名唯一，长期缓存不会出现更新问题，还能提升加载性能。
• 校验Angular构建配置：打开angular.json，确认production环境的构建配置中outputHashing属性值为all，确保所有静态资源构建后都会带唯一hash。
• 规范PWA更新逻辑（如果启用了PWA）：
  • 应用初始化时调用SwUpdate.checkForUpdate()主动检测版本更新，检测到新版本后提示用户刷新页面生效。
  • 检查ngsw-config.json中的资源分组配置，确保新增的构建资源都被纳入更新检测范围。
• 新增版本检测兜底逻辑：可以在前端添加定期版本校验逻辑，比如每次应用切前台时拉取服务端最新版本号/index.html的ETag对比，发现版本不一致时主动提示用户刷新，避免用户长期停留在旧版本。

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