更新后如何处理缓存的客户端文件

Question

我有一个在 Hostgator 上运行的应用程序。当我对 .js 文件进行更改时，我的用户在清除缓存之前看不到更改。这是将更改推送到我的应用程序的唯一选项吗？

基本上，我应该进行更改，更新文件，然后请求所有用户清除缓存？

Answer 1

您需要对您的文件包含使用版本控制。每当您更改文件包含的 URI 时，浏览器都不会找到缓存匹配，并将重新下载包含。

例如：

<script type="text/javascript" src="include/232/init.js"></script>

其中 232 是您可修改的版本号，每当您发布新代码时都应该更改。

或者，您可以使用查询字符串：

<script type="text/javascript" src="include/init.js?232"></script>

重点是，每当您希望访问者重新下载文件时，您都应该以某种方式更改文件包含 URI。

如果您使用 PHP 或其他服务器端语言，您可以设置此版本控制，以便在修改文件时自动进行： http://derek.io/blog/2009/auto-versioning-javascript-and-css-文件/

Answer 2

您可以将虚拟查询字符串附加到资产 URL 中：

<link href="http://mysite.com/main.css?v=1" rel="stylesheet" />

然后，每当您对 CSS 进行任何更改时，只需增加版本号即可。

这种技术称为“缓存清除”。 在 Google 中搜索，你会得到许多不同的变体。

Answer 3

link

Javascript 调用中。例如：

<script src="myexternal.js?20130116" type="text/javascript"></script>

这个例子很简单，但却证明了这一点。基本上，这告诉浏览器在无法识别完整路径的情况下加载文件。每当您更改 JavaScript 文件并希望用户获取最新版本时，只需更新问号（查询字符串）后的时间戳或值即可。

Answer 4

<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />

然后当你做出改变时

<link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" />

它可以是时间戳或其他什么，只是需要不同。

Answer 5

$jsFile = '/js/myFile.js';                // probably cached
$jsFile = '/js/myFile.js?r='.time();      // won't ever be cached

您无法真正清除客户端缓存，但您

可以

欺骗客户端浏览器认为这是它第一次看到此文件，它将再次下载它。 一旦获得稳定版本，请不要忘记禁用此功能。缓存文件是加快应用程序加载时间的好方法。

Answer 6

最简单的方法：在网址末尾使用版本号

js/my-script.js?v=1.0

。

更好的方法（所有导航器 100% 支持）：更改文件名本身

js/my-script.v1.0.js

。