使用 git push 更新站点，浏览器仍然加载旧的缓存版本答案

【问题标题】：Updating site with git push, browser still loads old cached version使用 git push 更新站点，浏览器仍然加载旧的缓存版本
【发布时间】：2016-07-06 05:44:59
【问题描述】：

Git 让更新我的网站变得更加轻松快捷。我喜欢它。但是，似乎在使用 git 更新文件时，我的浏览器似乎比它应该更长时间地坚持旧的可缓存文件。我不知道这是否只是我的浏览器，如果它是 git 的一个怪癖，或者这只是一个由于其他原因而只影响我的问题。

几天前我在我的网站上发现了一个错误，所以我修复了它并将受影响的 js 文件的新版本推送到我的网站。当我这样做时，我发现如果我没有按 f5，那么它将加载旧的 js 文件。所以我总是按 f5 并没有考虑它。但是对于我网站的用户来说，他们可能有相同的体验......这并不好。

所以我2天前更新了js文件并刷新了主页，检查它是否正常工作并离开它。刚才，我检查了网站上的另一个页面，加载了完全相同的 js 文件，它仍然使用旧的缓存版本。我按 f5，它现在加载新的。有什么办法可以强制所有浏览器忘记旧文件的缓存版本？我认为这应该在缓存的短暂生命周期后自动发生。

这是来自 chrome 的标题：

如您所见，缓存控制 max-age 非常高。我的服务器使用 nginx+apache 和一个名为 Vesta 控制面板 (VestaCP) 的后端系统运行。如果我修复了后端的缓存控制，我如何告诉我所有用户的浏览器忘记看似令人难忘的缓存版本？

【问题讨论】：

标签： javascript git google-chrome caching

【解决方案1】：

这取决于您的设置。如果您的索引页面是 HTML，您需要将服务器缓存设置为在 HTML 文件上非常快地过期，因此它会频繁地重新加载您的索引页面。（这不是 index.php 的问题，因为它应该每次都重新加载）。然后你会想要 filerev 你的资源文件。

例如，您可以使用 grunt、gulp 或类似的方法在所有资源的文件名末尾附加一个唯一字符串，因此 script.js 变为 script.1a34be4sde4.js，然后下一个更新变为 script.3ezseasd4sad.js等等。或者您可以手动重命名它们，每次添加 1（script-001.js、script-002.js 等 - 尽管文件很多，这会很痛苦）。

通过这种方式，您可以将您的 max-age 保持在非常高的水平，并且用户不必再次下载该版本的文件。但是，当您的索引页面将它们指向更新版本（新文件名）时，它们会抓取新版本并将其缓存很长。

使用git push 更新站点时会出现问题。为了保持你的仓库干净，你可以做一些事情。我可能倾向于在服务器上使用接收后挂钩脚本，将推送的分支签出到暂存文件夹，运行构建脚本，然后将最终版本移动到部署文件夹。

【讨论】：

【解决方案2】：

您可以使用几种缓存清除技术，但没有一种与 git 有特别的关联（有些可能是对它的诅咒）。

在您的 index.html 中，您可以使用查询 cachebuster：

<script src="/js/core.js?cache=12345">

这在某些情况下有效（如果查询字符串不同，大多数浏览器，AFAIK，不会重用缓存文件）。这意味着每次更新内容时都必须更改 index.html。还有很多其他方法可以进行缓存清除，google 一下，你可能至少会找到十几种，每一种都是“最好的”。

就个人而言，我在构建过程中将gulp-rev 与gulp-inject 结合使用。 gulp-rev 将为文件名创建一个基于散列的 uniqid（因此它将 core.js 重命名为 core-ad234af.js），然后 gulp-inject 更改 index.html 以便拉入该文件，而不是 core.js。我只在进行生产构建时这样做（因为在开发中，我将缓存控制设置为 0）。

但这一切都有效，因为我不执行 git push 来部署 - 我使用 git 将源代码获取到我的生产服务器，然后在设置了生产标志的服务器上构建。

【讨论】：