Angular 7部署至Azure后如何强制终端用户加载最新资源清除缓存

核心问题定位 #

当前配置的核心矛盾是：已经开启了Angular生产构建的文件名hash功能，但没有做缓存规则的分层处理，导致入口文件index.html被浏览器/CDN缓存，用户始终拿到引用旧hash资源的旧版入口页，自然无法加载更新后的JS/CSS包。
之前踩的典型坑：

• 全局给所有响应加不缓存头，既拖慢静态资源加载速度，又因为规则优先级问题没真正拦住index.html的缓存
• 前端全局给请求加no-cache头，触发跨域POST请求的预检异常，方案本身不可行
• 仅靠index.html里的meta标签控制缓存完全不可靠，HTTP响应头的优先级远高于meta标签

分步修复操作 #

1. 确认Angular构建配置 #

当前angular.json里的production配置基本正确，outputHashing: "all"已经开启了所有静态资源的文件名hash，资源内容变化时文件名会自动变更，本身就可以避免静态资源缓存问题。构建时不需要重复传--output-hashing all参数，直接执行ng build --configuration production即可。
参考配置：

"production": {
   "fileReplacements": [
       {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.prod.ts"
       }
   ],
   "scripts": [],
   "optimization": true,
   "outputHashing": "all",
   "sourceMap": false,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true,
   "budgets": [
       {
           "type": "initial",
           "maximumWarning": "5mb",
           "maximumError": "10mb"
       }
   ]
}

2. 替换Azure侧web.config规则 #

缓存分层原则：仅对入口文件index.html配置强制不缓存，其余带hash的JS/CSS/字体/图片等静态资源配置1年长缓存——因为静态资源文件名随内容hash变化，内容更新后文件名自动变更，不会存在旧缓存被误用的问题，同时长缓存可以大幅提升页面加载速度。
将现有web.config内容替换为如下配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <!-- Angular路由重写规则，适配前端路由 -->
    <rewrite>
      <rules>
        <rule name="Angular Route Fallback" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>

    <!-- 静态资源默认配置1年长缓存 -->
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
      <!-- 补充IIS默认未配置的MIME类型，避免静态资源404 -->
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>

    <httpProtocol>
      <customHeaders>
        <!-- 清除全局层面的缓存头，避免和单文件规则冲突 -->
        <remove name="Cache-Control" />
        <remove name="Pragma" />
        <remove name="Expires" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

  <!-- 单独为index.html配置强制不缓存规则，优先级最高 -->
  <location path="index.html">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache" />
      </staticContent>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
          <add name="Pragma" value="no-cache" />
          <add name="Expires" value="0" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>
</configuration>

3. 移除无效/错误配置 #

• 立刻删除前端HTTP拦截器中全局添加的Cache-Control: no-cache、Pragma: no-cache请求头，这是导致POST请求异常的直接原因，缓存控制只需要通过服务端响应头实现即可
• index.html中已添加的缓存meta标签可以保留，不会产生负面影响，但无需依赖其生效，HTTP响应头的缓存控制优先级远高于meta标签
  

4. 发布后校验项 #

• 如果Azure服务前挂载了CDN，每次版本发布后需要主动刷新CDN节点上的index.html缓存，避免CDN返回旧版入口文件
• 发布后直接在浏览器无痕模式访问站点，检查index.html的响应头：Cache-Control值应为no-cache, no-store, must-revalidate；任意选一个JS/CSS资源检查响应头，Cache-Control应包含max-age=31536000的长缓存配置，即代表规则生效

生效逻辑 #

规则生效后，用户每次访问站点都会向服务端请求最新的index.html：

• 如果版本未更新，index.html引用的静态资源hash值不变，浏览器直接读取本地缓存的静态资源，加载速度不受影响
• 如果版本已更新，index.html中引用的静态资源hash值变化，浏览器会自动拉取新的静态资源，完全不需要用户手动清除缓存或强制刷新。

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