使用git push更新网站，浏览器仍会加载旧的缓存版本

Question

Git让我的网站更新更容易，更快捷。我喜欢它。 但是，似乎在使用git更新文件时，我的浏览器似乎比它应该更长时间地依赖旧的可缓存文件。 我不知道这只是我的浏览器，如果它是git的怪癖，或者它只是因为某些其他原因而影响我的问题。

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

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

以下是chrome的标题：

如您所见，缓存控制max-age非常高。我的服务器运行nginx + apache，后端系统名为Vesta Control Panel（VestaCP）。 如果我在后端修复缓存控制，那么如何告诉我所有用户的浏览器忘记看似难以忘怀的缓存版本？

Answer 1

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

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

通过这种方式，您可以将最大年龄保持在极高水平，用户无需再次下载该版本的文件。但是当你的索引页面将它们指向更新版本（新文件名）时，它们会抓住新版本并将其缓存为愚蠢。

问题在于使用git push更新网站。为了保持您的仓库清洁，您可以做一些事情。我可能倾向于在服务器上使用post-receive钩子脚本来检查推送的分支到暂存文件夹，运行构建脚本，并将最终版本移动到部署文件夹。

Answer 2

你可以使用几种缓存破坏技术，其中没有一种与git特别相关（有些可能是它的诅咒）。

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

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

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

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

但这一切都有效，因为我没有进行git push部署 - 我使用git将源代码提供给我的生产服务器，然后使用生产标志设置在该服务器上构建。