Angular 12部署到Tomcat后Cache Busting不生效问题求助

核心问题根因 #

你尝试的所有前端缓存清除方案生效的前提是入口文件index.html未被浏览器强缓存，当前故障的核心原因是Tomcat默认给.html资源设置了较长的缓存有效期，浏览器不会主动发起请求获取最新的index.html，直接读取本地磁盘缓存，导致后续的静态资源哈希、版本号配置全部无法生效。

具体解决步骤 #

• 步骤1：配置Tomcat缓存过滤规则（核心修复） #

  直接在Tomcat的conf/web.xml或者你Angular应用打包生成的war包内的WEB-INF/web.xml中添加如下过滤器配置，给index.html单独设置不缓存规则，带哈希的静态资源设置长期缓存：

  <filter>
    <filter-name>CacheControlFilter</filter-name>
    <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
    <init-param>
      <param-name>ExpiresByType text/html</param-name>
      <param-value>access plus 0 seconds</param-value>
    </init-param>
    <init-param>
      <param-name>ExpiresByType application/javascript</param-name>
      <param-value>access plus 1 year</param-value>
    </init-param>
    <init-param>
      <param-name>ExpiresByType text/css</param-name>
      <param-value>access plus 1 year</param-value>
    </init-param>
    <init-param>
      <param-name>ExpiresByType image/*</param-name>
      <param-value>access plus 1 year</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CacheControlFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  

• 步骤2：确认Angular构建哈希配置生效 #

  不用每次构建手动传--output-hashing=all参数，直接在angular.json中固化生产环境配置，避免漏传：
  找到对应项目的生产构建配置节点，确保存在如下配置：

  {
    "projects": {
      "你的项目名称": {
        "architect": {
          "build": {
            "configurations": {
              "production": {
                "outputHashing": "all"
              }
            }
          }
        }
      }
    }
  }
  

• 步骤3：保留index.html缓存meta标签作为兜底 #

  你之前配置的index.html无缓存meta规则可保留作为第二道兜底，配置如下：

  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  

• 步骤4：移除手动给script标签加版本号的逻辑 #

  Angular自带的outputHashing会自动给静态资源生成内容相关的唯一哈希后缀，内容变更哈希自动更新，手动加?v=后缀属于冗余操作，若版本号更新不及时反而会导致缓存问题，直接移除该逻辑即可。

验证方法 #

部署完成后打开浏览器开发者工具的网络面板，查看index.html请求的响应头：

• Cache-Control值为no-cache, no-store, must-revalidate或者max-age=0即为配置生效
• 其他js、css、图片等静态资源的Cache-Control值为max-age=31536000即为符合预期

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