Angular CLI的--output-hashing是否始终对懒加载模块生效？

这个问题我之前踩过坑！核心原因其实是浏览器缓存了你的Angular主入口相关文件（比如runtime.*.js或者index.html），导致它还在复用旧的懒加载模块路径映射——哪怕你已经通过--output-hashing=all给懒加载chunk加上了新哈希，只要主入口的模块映射没更新，浏览器就不知道该去拉新的chunk。

具体排查与解决步骤： #

• 先确认构建输出是否正确
  执行构建命令后，去dist目录检查：

  1. 懒加载模块的chunk文件（比如lazy-module-xxxxxx.js）是否带有新的哈希值；
  2. 打开runtime.*.js文件，搜索懒加载模块的路径，确认它指向的是最新哈希的chunk文件。
     要是这里的映射没更新，那大概率是构建命令的问题——确保你用的是：

  # Angular 旧版本
  ng build --prod --output-hashing=all
  # Angular 新版本（v12+）
  ng build --configuration production --output-hashing=all
  

• 调整IIS的缓存策略（关键！）
  IIS默认可能给静态文件设置了过长的缓存时间，尤其是index.html和主入口js文件，这会导致浏览器一直用旧的。你需要在站点的web.config里添加缓存规则：

  <configuration>
    <system.webServer>
      <staticContent>
        <!-- 给带哈希的静态资源设置合理缓存时长（比如7天） -->
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
        
        <!-- 强制禁止缓存index.html，确保每次请求都从服务器拉取 -->
        <remove fileExtension=".html" />
        <mimeMap fileExtension=".html" mimeType="text/html" />
        <clientCache cacheControlMode="NoCache" cacheControlCustom="no-store, must-revalidate" />
        
        <!-- 对runtime、main这类入口文件也设置短缓存（比如5分钟） -->
        <remove fileExtension=".js" />
        <mimeMap fileExtension=".js" mimeType="application/javascript" />
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00:05:00" />
      </staticContent>
    </system.webServer>
  </configuration>
  

  原理很简单：index.html是所有资源的入口，只要它是最新的，里面引用的带哈希的资源（包括runtime）就会被浏览器重新拉取，而runtime里的懒加载路径映射更新后，自然会去加载新的懒加载chunk。

• 临时应急方案
  如果你已经部署了但还没调整IIS配置，可以让用户在访问非懒加载页面时按Ctrl+F5强制刷新——这会让浏览器忽略缓存，重新拉取index.html和runtime文件，之后再访问懒加载模块就能拿到最新内容了。

总结 #

--output-hashing=all本身是有效的，但它只负责给文件加哈希，主入口文件的缓存策略才是关键。只要确保入口文件能及时更新，带哈希的懒加载chunk就会被正确加载，不会出现缓存残留的问题。

内容的提问来源于stack exchange，提问作者Uğur Dinç