Angular部署后缓存击穿问题及官方实现方案咨询

1. 确保outputHashing配置正确 #

命令行的--output-hashing all参数可能被angular.json里的配置覆盖，直接修改配置文件才是可靠方式：
打开angular.json，找到对应项目的build配置，在options里设置：

"architect": {
  "build": {
    "options": {
      "outputHashing": "all"
    },
    "configurations": {
      "production": {
        // 确保production配置里没有将outputHashing设为none
      }
    }
  }
}

这个配置会给所有JS、CSS、静态资源的文件名添加内容哈希，只要文件内容变化，文件名就会同步更新，彻底避免Cloudflare缓存旧资源的问题。

2. 排查Angular 17的构建差异 #

Angular 17默认用ESBuild构建，但outputHashing的配置逻辑和旧版本一致。如果构建后文件名仍无变化：

• 检查angular.json的production配置是否单独设置了outputHashing: none
• 确认没有自定义构建插件或脚本修改了输出文件名
• 直接查看dist目录下的文件，哈希可能出现在文件名中间（比如main.abc123.js），别漏看

3. 手动动态添加版本查询参数（备用方案） #

如果outputHashing确实无法生效，可以通过动态版本参数实现缓存击穿：

• 在environment.prod.ts中添加版本号：

  export const environment = {
    production: true,
    appVersion: '1.0.1' // 每次部署更新这个值
  };
  

• 修改index.html，在脚本引用中加入版本参数：

  <script src="main.js?v={{ environment.appVersion }}"></script>
  

  注意：Angular默认不会对index.html做插值，需要额外配置或用构建脚本（比如Node.js脚本、sed命令）在构建后替换版本号。

4. 配合Cloudflare缓存规则优化 #

虽然是Angular原生方案，但搭配Cloudflare设置能更高效：

• 给index.html设置短缓存（比如5分钟），确保用户能及时获取最新的页面入口
• 给带哈希的静态资源设置长缓存（比如1年），利用Cloudflare的缓存能力减少服务器压力

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