jquery - 如何避免每次对js文件进行一些修改时清除缓存

Question

我正在使用 j-query 进行客户端活动。

但是在对 js 文件进行任何修改后，当我尝试运行应用程序时，新功能无法正常工作。

然后我需要刷新（ctrl + F5）浏览器以使其工作。

这在本地测试时很好，但是当相同的修改推送到实时服务器时，它们也会出现同样的问题。

而且我不能强迫我的用户在每次修改后刷新和清除他们的缓存。

那么有什么办法可以解决这个问题吗？

Answer 1

您应该将版本号（或递增的数字）附加到已部署的脚本中。然后在发布文件的新版本时增加数字，浏览器将重新加载文件。

因此，您将拥有<script src=yourscript-1.js></script>第一个版本，<script src=yourscript-2.js></script>第二个版本，依此类推。

作为奖励，人们可能能够报告特定版本的 js 中的错误，这应该有助于发现错误。

Answer 2

随机化文件源

<script src="yourscript.js?123"></script> 

JS解决方案：

<script>
     document.write('<script src="yourscript.js?'+Math.random()+'"></script>');
</script>

或者使用服务器端语言（在本例中为 asp.net）：

<script src="yourscript.js?<%= GetApplicationVersion() %>"></script>

你明白了。

Answer 3

如果你正在使用Django，你可以使用django-compressor. 它既压缩您的代码并生成随机文件名。

来自文档的片段：

{% load compress %}

{% compress js %}
<script src="/static/js/one.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">obj.value = "value";</script>
{% endcompress %}

将呈现为：

<script type="text/javascript" src="/static/CACHE/js/3f33b9146e12.js" charset="utf-8"></script>

Answer 4

您可以使用此 jQuery 脚本刷新页面。

reload()应该接受一个参数，告诉它进行硬重新加载，即忽略缓存：

location.reload(true);

或使用

<meta http-equiv="Cache-control" content="no-cache">

Answer 5

向包含的文件添加参数应该可以工作。

例子：

<script type="text/javascript" src="js/scripts.js?v=1"></script>

您可以手动完成，或者编写一个自动添加它的小脚本。