Chrome 一直在缓存我的旧页面，直到我点击刷新按钮答案

【问题标题】：Chrome keeps caching my old page until I hit the refresh buttonChrome 一直在缓存我的旧页面，直到我点击刷新按钮
【发布时间】：2016-08-24 03:12:14
【问题描述】：

我在 Chrome 中的SPA 有一个非常奇怪的行为。我正在运行带有AngularJS 前端的本地IIS 服务器。我正在使用 Gulp 来缓存我所有的 Javascript 和 CSS 文件。最近我发现我的网站正在加载旧的HTML文件，这是由于角度$templateCache，所以我使用gulp-angular-templatecache解决了这个问题，但是出现了一个新问题。

当我打开我的电脑时，启动 IIS 服务器并通过在 URL 栏中键入 localhost 来使用 Chrome 加载我的应用程序，Chrome 会从缓存中加载所有内容，因此我会得到旧的 JS、CSS 和 HTML 文件（我看到chrome 正在加载一个旧的index.html 文件）但是如果我去像localhost/mainPage 这样的其他路线，它会加载我所有的新文件，并且一切都按预期工作。之后如果我再去localhost，老网站又会从缓存中加载！！

我不是专家，但这似乎是一种非常奇怪的行为。这是 Chrome 错误吗？是 Chrome 的错还是我的 AngularJS SPA 有什么问题？

在我的Web.config 中，我有这个禁用index.html 的缓存：

  <!-- Disable index.html cache -->
  <location path="index.html">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache" />
      </staticContent>
    </system.webServer>
  </location>

这可以最大限度地延长所有其他文件的缓存时间：

<system.webServer>    
   <staticContent>
      <!-- Cache busting for 1 year (max recommended value) -->
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
   </staticContent>
</system.webServer>

【问题讨论】：

标签： javascript angularjs google-chrome browser-cache

【解决方案1】：

有这两种情况：

在开发时，您应该使用谷歌浏览器提供的disable cache 选项。为此，打开 Devtools（Chrome 菜单 > 更多工具.. > Devtools），转到网络选项卡并选中显示禁用缓存的框
发布到生产环境时，您应该对缩小文件使用任何文件修订工具。这会将哈希附加到文件名（如 scripts.472bc7.js），以避免最终用户浏览器出现缓存问题

【讨论】：

我已经为每个文件附加了一个哈希值（cache-bust），这就是问题所在，chrome 不断获取旧的 html 文件