部署至Azure的Angular应用缓存问题排查请求

这问题我之前帮好几个Angular开发者排查过，结合Azure的部署机制和Angular的构建特性，给你梳理几个最可能的原因和对应的解决办法：

1. 入口文件index.html被缓存 #

你提到bundle文件名已经带哈希了，但用户访问的入口是index.html——如果这个文件被浏览器或者Azure的静态托管服务缓存了，浏览器会一直加载旧的index.html，而旧文件里引用的还是老的bundle路径，自然看不到新内容。哪怕你清了本地缓存，Azure边缘节点的缓存没更新的话，还是得等。

解决办法：

• 给index.html配置严格的缓存策略：
  • 如果用Azure Static Web Apps，在项目根目录创建staticwebapp.config.json，添加路由规则强制index.html不缓存：

    {
      "routes": [
        {
          "route": "/*",
          "serve": "/index.html",
          "headers": {
            "Cache-Control": "no-cache, no-store, must-revalidate"
          }
        }
      ]
    }
    

  • 如果是App Service，修改web.config文件，给index.html设置相同的Cache-Control头，确保每次请求都从服务器拉取最新的入口文件。

2. Azure CDN缓存未及时失效 #

如果你的应用部署后配置了Azure CDN（生产环境很常见），CDN节点会缓存静态资源。哪怕你本地清了浏览器缓存，CDN上的旧资源还在，得等缓存自然过期或者手动清除。

解决办法：

• 部署完成后手动触发CDN清除：在Azure门户找到你的CDN资源，进入「清除」选项，输入/*清除所有节点的缓存。
• 配置CDN缓存规则优化：给带哈希的bundle文件设置长缓存时间（比如1年），让CDN发挥加速作用；同时给index.html设置no-cache，避免入口文件被缓存。

3. Angular构建的哈希配置验证 #

虽然你说bundle文件名会变更，但还是建议确认下angular.json里的构建配置是否正确开启了哈希：

"architect": {
  "build": {
    "options": {
      "outputHashing": "all",
      // 其他构建配置...
    }
  }
}

outputHashing设为all会给所有静态资源（js、css、图片等）添加哈希后缀，确保内容变更时文件名绝对唯一，排除构建层面的问题。

4. 网络层代理缓存干扰 #

有时候企业内网的代理服务器、或者某些浏览器的顽固缓存会残留旧资源，这时候清本地浏览器缓存也没用，得等代理缓存过期。

解决办法：

• 用浏览器的隐私模式打开应用，排除本地缓存的干扰，测试是否能加载新内容。
• 极端情况下，可以给index.html里的bundle引用手动加版本参数（比如main.xxx.js?v=20240520），强制浏览器请求新资源。

总结下来，最常见的就是index.html缓存和CDN缓存未更新这两个原因，先从配置入口文件的缓存头入手，再检查CDN的设置，应该就能解决大部分问题。

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