我注意到一些浏览器(特别是Firefox和Opera)非常热衷于使用.css和.js文件的缓存副本，甚至在浏览器会话之间。当您更新其中一个文件时，这会导致一个问题，但用户的浏览器会继续使用缓存的副本。
当文件发生更改时，强迫用户浏览器重新加载文件的最优雅的方法是什么?
理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。
我发现John Millikin和da5id的建议很有用。这有一个专门的术语:自动版本控制。
我在下面发布了一个新的答案，这是我最初的解决方案和约翰的建议的结合。
SCdF建议的另一个想法是将伪查询字符串附加到文件中。(一些自动使用时间戳作为伪查询字符串的Python代码是由pi..提交的)
然而，关于浏览器是否缓存带有查询字符串的文件还存在一些讨论。(请记住，我们希望浏览器缓存该文件并在以后的访问中使用它。我们只希望它在文件更改时再次获取该文件。)
当前回答
在Laravel (PHP)中，我们可以以以下清晰而优雅的方式(使用文件修改时间戳)做到这一点:
<script src="{{ asset('/js/your.js?v='.filemtime('js/your.js')) }}"></script>
CSS也是如此
<link rel="stylesheet" href="{{asset('css/your.css?v='.filemtime('css/your.css'))}}">
示例HTML输出(filemtime返回时间作为Unix时间戳)
<link rel="stylesheet" href="assets/css/your.css?v=1577772366">
其他回答
对于在开发和测试时遇到此问题的开发人员:
简单地删除缓存。
“保持缓存与文件一致”..太麻烦了。
一般来说，我不介意加载更多的文件——甚至在大多数项目中加载没有改变的文件——实际上是无关紧要的。在开发应用程序时，我们主要从磁盘加载，在localhost:port上加载，因此网络流量的增加不是一个棘手的问题。
大多数小项目只是玩玩而已——它们从来没有真正投入生产。所以对他们来说，你不需要更多的东西……
因此，如果你使用Chrome DevTools，你可以遵循如下图所示的禁用缓存方法:
如果你有Firefox缓存问题:
只在开发过程中这样做。你还需要一种机制来强制重新加载用于生产，因为如果你频繁地更新你的应用程序，你的用户将使用旧的缓存失效的模块，而你没有提供一个专门的缓存同步机制，就像上面的答案中描述的那样。
是的，这个信息已经在以前的答案中，但我仍然需要做谷歌搜索才能找到它。
另一个关于ASP的建议。网的网站,
Set different cache-control:max-age values, for different static files. For CSS and JavaScript files, the chances of modifying these files on server is high, so set a minimal cache-control:max-age value of 1 or 2 minutes or something that meets your need. For images, set a far date as the cache-control:max-age value, say 360 days. By doing so, when we make the first request, all static contents are downloaded to client machine with a 200-OK response. On subsequent requests and after two minutes, we see 304-Not Modified requests on CSS and JavaScript files which avoids us from CSS and JavaScript versioning. Image files will not be requested as they will be used from cached memory till the cache expires. By using the below web.config configurations, we can achieve the above described behavior, <system.webServer> <modules runAllManagedModulesForAllRequests="true"/> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:01:00"/> </staticContent> <httpProtocol> <customHeaders> <add name="ETAG" value=""/> </customHeaders> </httpProtocol> </system.webServer> <location path="Images"> <system.webServer> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="180.00:00:00" /> </staticContent> </system.webServer> </location>
谷歌的mod_pagespeed插件将为你自动版本控制。它真的很光滑。
它解析HTML在它的方式从web服务器(与PHP, Ruby on Rails, Python，静态HTML -任何)和重写链接到CSS, JavaScript，图像文件，使他们包括一个id代码。它在修改后的url上提供文件，并对它们进行非常长的缓存控制。当文件更改时，它会自动更改url，因此浏览器必须重新获取它们。它基本上可以正常工作，无需对代码进行任何更改。它甚至还会缩小你的代码。
我们有一个解决方案，有一些不同的实现方式。我们使用上面的解决方案。
datatables?v=1
我们可以处理文件的版本。这意味着每次我们改变文件时，它的版本也会改变。但这不是一个合适的方式。
另一种方法使用GUID。它也不合适，因为每次它都从浏览器缓存中获取文件而不使用。
datatables?v=Guid.NewGuid()
最后一种最好的方法是:
当文件发生更改时，也要更改版本。检查以下代码:
<script src="~/scripts/main.js?v=@File.GetLastWriteTime(Server.MapPath("/scripts/main.js")).ToString("yyyyMMddHHmmss")"></script>
通过这种方式，当您更改文件时，LastWriteTime也会更改，因此文件的版本将会更改，并且在下次打开浏览器时，它会检测到一个新文件并获取它。
好吧，我已经通过改变JavaScript文件版本每次页面加载通过添加一个随机数的JavaScript文件版本，如下所示:
// Add it to the top of the page
<?php
srand();
$random_number = rand();
?>
然后将随机数应用到JavaScript版本，如下所示:
<script src="file.js?version=<?php echo $random_number;?>"></script>
