AngularJS应用缓存异常：新版本发布后浏览器仍加载旧文件

1. 静态资源文件名哈希化 #

这是解决缓存问题最直接有效的方案，核心是让每次构建后的JS、CSS、字体等静态资源文件名带上唯一哈希值（比如app.7f9d2a.js）：

• 借助Gulp、Webpack、Grunt等构建工具自动生成带哈希的文件名，无需手动修改。
• 确保index.html中引用的资源路径自动同步为带哈希的版本，避免出现旧路径引用。
  这种方式下，浏览器会将带新哈希的文件视为全新资源，直接从服务器拉取，不会使用旧缓存。

2. 配置服务器HTTP缓存头 #

针对不同类型文件设置差异化缓存策略：

• 带哈希的静态资源：设置Cache-Control: public, max-age=31536000, immutable，允许浏览器永久缓存这些文件——因为只有文件名变更才会触发更新，不会出现缓存过期问题。
  • Nginx示例配置：

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
      expires 1y;
      add_header Cache-Control "public, immutable";
    }
    

• index.html：设置Cache-Control: no-cache, no-store, must-revalidate或max-age=0，确保浏览器每次请求都从服务器获取最新的入口文件，避免因为入口文件缓存导致引用的新资源无法加载。
  • Nginx示例配置：

    location = /index.html {
      expires -1;
      add_header Cache-Control "no-cache, no-store, must-revalidate";
    }
    

3. 处理AngularJS模板缓存 #

如果应用使用了$templateCache（通常是构建时将模板打包进JS），需要确保模板缓存随版本更新：

• 构建时给模板缓存的键添加哈希后缀，或者将版本号作为缓存键的一部分，确保新版本模板不会和旧缓存冲突。
• 也可以在应用启动时检查版本，主动清空旧模板缓存：

  angular.module('myApp').run(['$templateCache', '$http', '$window', function($templateCache, $http, $window) {
    $http.get('/version.json').then(function(res) {
      const storedVersion = localStorage.getItem('appVersion');
      if (storedVersion && storedVersion !== res.data.version) {
        $templateCache.removeAll();
        localStorage.setItem('appVersion', res.data.version);
        $window.location.reload(true);
      } else {
        localStorage.setItem('appVersion', res.data.version);
      }
    });
  }]);
  

4. 版本检测与强制刷新兜底 #

添加应用内版本检测机制，主动提醒用户更新：

• 在服务器根目录放置version.json文件，内容类似{"version": "v1.2.3"}，每次发布新版本时更新该文件的版本号。
• 应用启动时请求该文件，对比本地存储的版本号，若不一致则提示用户刷新页面，或自动触发强制刷新（需给出友好提示）。

注意事项 #

• 如果使用了CDN，需确保CDN配置支持文件名哈希更新，或配置CDN缓存规则与源站一致，避免CDN缓存旧资源。
• 若用户清理缓存后仍无法加载新内容，大概率是CDN或中间代理服务器的缓存未失效，此时需要手动刷新CDN缓存，或等待CDN缓存过期。

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