如何防止缓存我的 Javascript 文件?

IT技术 javascript caching
2021-02-10 17:05:05

我有一个简单的 html:

<html>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script src="test.js"></script>
</body>
</html>

在 test.js 中,我更改了一个 Javascript 函数,但我的浏览器正在缓存此文件。如何禁用脚本 src 的缓存?

5个回答

将随机查询字符串添加到 src

您可以通过每次更改时增加查询字符串来手动执行此操作:

<script src="test.js?version=1"></script>

或者,如果您使用的是服务器端语言,则可以自动生成:

ASP.NET:

<script src="test.js?rndstr=<%= getRandomStr() %>"></script>

可以在此处找到有关缓存破坏的更多信息:

https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

你都错了!<script type="text/javascript" src="test.js?md5=..."></script>
2021-03-15 17:05:05
@SébastienGarcia-Romeo 这是一个有效的选择。这是我在我的链接帖子curtistimson.co.uk/post/front-end-dev/what-is-cache-busting上提出的选项之一
2021-03-23 17:05:05
另一种解决方案是使用某种内部版本号(例如自开始以来的提交次数,或修订号/提交哈希)。通过这种方式,您将利用服务器端语言自动执行此操作,但不会在没有真正改变的情况下失去缓存的优势。但这需要,如前所述:版本控制(或其他一些更改跟踪)和服务器端处理。
2021-03-30 17:05:05
@Tadeck 比这更好,使用内容的散列值,以便在需要时更新。可能会生成一个新版本,但 JS 可能不会改变。ASP.NET Bundling and Minification内置了这个。curtistimson.co.uk/front-end-dev/what-is-cache-busting/#_hashed
2021-04-10 17:05:05
此解决方案的一个令人讨厌的方面是 Chrome 会将其视为新文件。例如,如果您设置了断点,则在下一次重新加载时将丢失所有断点。
2021-04-10 17:05:05
<script src="test.js?random=<?php echo uniqid(); ?>"></script>

编辑:或者您可以使用文件修改时间,以便将其缓存在客户端上。

<script src="test.js?random=<?php echo filemtime('test.js'); ?>"></script>
简单但很好的解决方案,谢谢。
2021-03-17 17:05:05
uniqid()每次都会生成新的文件名。我认为,更好的方法是filemtime函数。这只会在修改文件时更改文件版本,这就是我们更改代码并要求客户端清除缓存时的问题。
2021-03-23 17:05:05
您最好将“LastWriteTimeUTC”unix-timestamp 放在那里,这样只要脚本不更改,它就会保持缓存状态。
2021-03-26 17:05:05

配置您的网络服务器以发送脚本的缓存控制 HTTP 标头。

HTML 文档中的假标题:

  1. 不像真正的 HTTP 标头那样受支持
  2. 应用于 HTML 文档,而不是它链接到的资源

您可以将 queryString 附加到您的 src 并仅在您发布更新版本时更改它:

<script src="test.js?v=1"></script>

这样,浏览器将使用缓存的版本,直到指定新版本(v=2,v=3...)

您可以将随机(或日期时间字符串)作为查询字符串添加到指向您的脚本的 url。像这样:

<script type="text/javascript" src="test.js?q=123"></script> 

每次刷新页面时,您都需要确保 'q' 的值已更改。