我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
我在为我的SPA寻找解决方案时遇到了这个问题，它只有一个列出所有必要文件的index.html文件。虽然我得到了一些帮助我的线索，但我找不到一个快速而简单的解决方案。
最后，我编写了一个快速页面(包括所有代码)来自动版本HTML/JavaScript index.html文件，作为发布过程的一部分。它工作完美，只更新新文件根据日期最后修改。
你可以在Autoversion your SPA index.html上看到我的文章。还有一个独立的Windows应用程序。
代码的核心是:
private void ParseIndex(string inFile, string addPath, string outFile)
{
string path = Path.GetDirectoryName(inFile);
HtmlAgilityPack.HtmlDocument document = new HtmlAgilityPack.HtmlDocument();
document.Load(inFile);
foreach (HtmlNode link in document.DocumentNode.Descendants("script"))
{
if (link.Attributes["src"]!=null)
{
resetQueryString(path, addPath, link, "src");
}
}
foreach (HtmlNode link in document.DocumentNode.Descendants("link"))
{
if (link.Attributes["href"] != null && link.Attributes["type"] != null)
{
if (link.Attributes["type"].Value == "text/css" || link.Attributes["type"].Value == "text/html")
{
resetQueryString(path, addPath, link, "href");
}
}
}
document.Save(outFile);
MessageBox.Show("Your file has been processed.", "Autoversion complete");
}
private void resetQueryString(string path, string addPath, HtmlNode link, string attrType)
{
string currFileName = link.Attributes[attrType].Value;
string uripath = currFileName;
if (currFileName.Contains('?'))
uripath = currFileName.Substring(0, currFileName.IndexOf('?'));
string baseFile = Path.Combine(path, uripath);
if (!File.Exists(baseFile))
baseFile = Path.Combine(addPath, uripath);
if (!File.Exists(baseFile))
return;
DateTime lastModified = System.IO.File.GetLastWriteTime(baseFile);
link.Attributes[attrType].Value = uripath + "?v=" + lastModified.ToString("yyyyMMddhhmm");
}
其他回答
您可以简单地添加一些随机数与CSS和JavaScript URL
example.css?randomNo = Math.random()
对于Java Servlet环境，可以查看Jawr库。功能页面解释了它是如何处理缓存的:
Jawr will try its best to force your clients to cache the resources. If a browser asks if a file changed, a 304 (not modified) header is sent back with no content. On the other hand, with Jawr you will be 100% sure that new versions of your bundles are downloaded by all clients. Every URL to your resources will include an automatically generated, content-based prefix that changes automatically whenever a resource is updated. Once you deploy a new version, the URL to the bundle will change as well so it will be impossible that a client uses an older, cached version.
该库还可以简化JavaScript和CSS，但如果不需要，可以将其关闭。
这里的所有答案似乎都表明在命名方案中存在某种版本控制，但这也有其缺点。
浏览器应该通过读取web服务器的响应，特别是HTTP报头来清楚地知道什么该缓存，什么不该缓存——这个资源的有效期是多长?自上次检索该资源以来，该资源是否已更新?等。
如果事情配置“正确”，只是更新你的应用程序的文件应该(在某些时候)刷新浏览器的缓存。例如，你可以配置你的web服务器，告诉浏览器永远不缓存文件(这是一个坏主意)。
更深入的解释在Web缓存的工作原理中。
更改文件名也可以。但这通常不是最简单的解决方案。
正如你所注意到的，HTTP缓存控制标头为“no-cache”并不总是有效。HTTP 1.1规范为用户代理提供了决定是否请求新副本的回旋余地。(如果只看指令的名称，这是不直观的。去阅读实际的HTTP 1.1缓存规范…这在上下文中更有意义。)
简而言之，如果你想要严格的缓存控制使用
Cache-Control: no-cache, no-store, must-revalidate
在响应头中。
仅在纯JavaScript的本地开发中禁用script.js的缓存。
它会注入一个随机的script.js?Wizardry =1231234并阻塞常规script.js:
<script type="text/javascript">
if(document.location.href.indexOf('localhost') !== -1) {
const scr = document.createElement('script');
document.setAttribute('type', 'text/javascript');
document.setAttribute('src', 'scripts.js' + '?wizardry=' + Math.random());
document.head.appendChild(scr);
document.write('<script type="application/x-suppress">'); // prevent next script(from other SO answer)
}
</script>
<script type="text/javascript" src="scripts.js">
