我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
您可以简单地添加一些随机数与CSS和JavaScript URL
example.css?randomNo = Math.random()
其他回答
对于在开发和测试时遇到此问题的开发人员:
简单地删除缓存。
“保持缓存与文件一致”..太麻烦了。
一般来说，我不介意加载更多的文件——甚至在大多数项目中加载没有改变的文件——实际上是无关紧要的。在开发应用程序时，我们主要从磁盘加载，在localhost:port上加载，因此网络流量的增加不是一个棘手的问题。
大多数小项目只是玩玩而已——它们从来没有真正投入生产。所以对他们来说，你不需要更多的东西……
因此，如果你使用Chrome DevTools，你可以遵循如下图所示的禁用缓存方法:
如果你有Firefox缓存问题:
只在开发过程中这样做。你还需要一种机制来强制重新加载用于生产，因为如果你频繁地更新你的应用程序，你的用户将使用旧的缓存失效的模块，而你没有提供一个专门的缓存同步机制，就像上面的答案中描述的那样。
是的，这个信息已经在以前的答案中，但我仍然需要做谷歌搜索才能找到它。
我已经通过使用解决了这个问题 ETag:
ETag或实体标签是HTTP的一部分，HTTP是万维网协议。它是HTTP为Web缓存验证提供的几种机制之一，这种机制允许客户机发出有条件的请求。这使得缓存更加高效并节省带宽，因为如果内容没有更改，Web服务器不需要发送完整的响应。ETags还可以用于乐观并发控制，1作为一种帮助防止资源的同步更新相互覆盖的方法。
I am running a Single-Page Application (written in Vue.JS). The output of the application is built by npm, and is stored as dist folder (the important file is: dist/static/js/app.my_rand.js) Nginx is responsible of serving the content in this dist folder, and it generates a new Etag value, which is some kind of a fingerprint, based on the modification time and the content of the dist folder. Thus when the resource changes, a new Etag value is generated. When the browser requests the resource, a comparison between the request headers and the stored Etag, can determine if the two representations of the resource are the same, and could be served from cache or a new response with a new Etag needs to be served.
这里的所有答案似乎都表明在命名方案中存在某种版本控制，但这也有其缺点。
浏览器应该通过读取web服务器的响应，特别是HTTP报头来清楚地知道什么该缓存，什么不该缓存——这个资源的有效期是多长?自上次检索该资源以来，该资源是否已更新?等。
如果事情配置“正确”，只是更新你的应用程序的文件应该(在某些时候)刷新浏览器的缓存。例如，你可以配置你的web服务器，告诉浏览器永远不缓存文件(这是一个坏主意)。
更深入的解释在Web缓存的工作原理中。
不要使用foo.css?version=1!
浏览器不应该缓存带有GET变量的url。据http://www.thinkvitamin.com/features/webapps/serving-javascript-fast网站报道，尽管ie和Firefox会忽略这一点，但Opera和Safari不会!相反，使用foo.v1234.css，并使用重写规则去除版本号。
对于一个2008年左右的网站来说，这30个左右的答案是很好的建议。然而，当涉及到现代的单页应用程序(SPA)时，可能是时候重新考虑一些基本假设了……特别是web服务器只提供文件的单个最新版本是理想的想法。
假设您是一个用户，浏览器中加载了SPA的M版本:
CD管道将应用程序的新版本N部署到服务器上 您在SPA中导航，它向服务器发送一个XMLHttpRequest (XHR)以获取/some.template
(您的浏览器没有刷新页面，所以您仍然在运行版本M)
服务器返回/some的内容。template -你想让它返回模板的版本M还是N ?
如果格式为/some。模板在版本M和N之间发生了变化(或者文件被重命名了等等)，你可能不希望将版本N的模板发送到运行旧版本M解析器的浏览器。†
Web应用程序在满足两个条件时遇到这个问题:
在初始页面加载后的一段时间内异步请求资源 应用程序逻辑假设有关资源内容的事情(在将来的版本中可能会改变)
一旦你的应用程序需要并行提供多个版本，解决缓存和“重新加载”变得微不足道:
将所有site文件安装到versioned目录:/v<release_tag_1>/…files…，/v<release_tag_2>/…files… 设置HTTP头，让浏览器永远缓存文件
(或者更好的是，把所有东西都放在CDN中)
更新所有<script>和<link>标签等，以指向某个版本目录中的该文件
最后一步听起来很棘手，因为它可能需要为服务器端或客户端代码中的每个URL调用URL构建器。或者您可以聪明地使用<base>标记并在一个地方更改当前版本。
†解决这个问题的一种方法是在新版本发布时强制浏览器重新加载所有内容。但是为了让任何正在进行的操作完成，至少并行支持两个版本:v-current和v-previous可能仍然是最简单的。
