如何强制浏览器重新加载缓存的CSS和JS文件？

假设你有一个文件可用于：

/styles/screen.css

您可以在URI上附加一个包含版本信息的查询参数，例如：

/styles/screen.css?v=1234

或者您可以在前面添加版本信息，例如：

/v/1234/styles/screen.css

在我看来，第二种方法更适用于CSS文件，因为它们可以使用相对URL引用图像，这意味着如果您像这样指定background-image:

body {
    background-image: url('images/happy.gif');
}

它的URL将有效地是：

/v/1234/styles/images/happy.gif

这意味着如果您更新所使用的版本号，服务器将把其视为新资源并不使用缓存版本。如果您基于Subversion, CVS等版本进行版本控制，则CSS文件中引用的图像更改将被注意到。第一种方案不能保证这一点，即相对于/styles/screen.css?v=1235的URL images/happy.gif是/styles/images/happy.gif，其中不包含任何版本信息。

我使用Java servlets实现了这种技术来实现缓存解决方案，并简单地处理对/v/*的请求，委托给底层资源（即/styles/screen.css）。在开发模式下，我设置了缓存头，告诉客户端始终检查资源与服务器的新鲜程度（如果您委托给Tomcat的DefaultServlet并且.css，.js等文件未更改，则通常会导致304），而在部署模式下，我设置了永久缓存的标头。

如果您将会话ID作为JavaScript/CSS文件的虚假参数添加，就可以强制进行“会话级缓存”。

<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>

如果您想要版本级别的缓存，您可以添加一些代码来打印文件日期或类似的内容。如果您使用Java语言，您可以使用自定义标签以优雅的方式生成链接。

<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>

对于ASP.NET，我提议采用以下高级选项解决方案（调试/发布模式、版本）：
可以按以下方式引入JavaScript或CSS文件：

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix和Global.CssPostfix是在Global.asax中通过以下方式计算得出的：

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

只需在需要进行强制刷新（强制浏览器重新加载缓存的CSS和JavaScript文件）的位置添加以下代码：

$(window).load(function() {
    location.reload(true);
});

请在.load内执行此操作，以避免像循环一样刷新。

如果你在使用Git和PHP，那么你可以使用以下代码，在Git仓库发生变化时重新加载脚本缓存：

exec('git rev-parse --verify HEAD 2> /dev/null', $gitLog);
echo '  <script src="/path/to/script.js"?v='.$gitLog[0].'></script>'.PHP_EOL;

对于开发：使用浏览器设置，例如，Chrome的网络选项卡中有一个禁用缓存选项。

对于生产：使用服务器端渲染框架或纯JavaScript代码向请求附加唯一的查询参数（例如，q?Date.now()）。

// Pure JavaScript unique query parameter generation
//
//=== myfile.js

function hello() { console.log('hello') };

//=== end of file

<script type="text/javascript">
    document.write('<script type="text/javascript" src="myfile.js?q=' + Date.now() + '">
    // document.write is considered bad practice!
    // We can't use hello() yet
</script>')

<script type="text/javascript">
    hello();
</script>

只需使用服务器端代码添加文件日期… 这样它就可以被缓存，只有在文件更改时才重新加载。

在 ASP.NET 中：

<link rel="stylesheet" href="~/css/custom.css?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/css/custom.css")).ToString(),"[^0-9]", ""))" />

<script type="text/javascript" src="~/js/custom.js?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/js/custom.js")).ToString(),"[^0-9]", ""))"></script>

这可以简化为：

<script src="<%= Page.ResolveClientUrlUnique("~/js/custom.js") %>" type="text/javascript"></script>

通过为您的项目添加扩展方法来扩展 Page：

public static class Extension_Methods
{
    public static string ResolveClientUrlUnique(this System.Web.UI.Page oPg, string sRelPath)
    {
        string sFilePath = oPg.Server.MapPath(sRelPath);
        string sLastDate = System.IO.File.GetLastWriteTime(sFilePath).ToString();
        string sDateHashed = System.Text.RegularExpressions.Regex.Replace(sLastDate, "[^0-9]", "");

        return oPg.ResolveClientUrl(sRelPath) + "?d=" + sDateHashed;
    }
}

对于在开发和测试过程中遇到此问题的开发人员：

暂时移除缓存。

"使缓存与文件保持一致"..这太麻烦了...

一般来说，我并不介意在大多数项目上加载更多 - 即使是重新加载未更改的文件也不会有很大影响。 在开发应用程序时，我们大多数情况下都是从磁盘上加载，在 localhost:port 上 - 所以这个增加网络流量问题并不是一个完全无法解决的问题。

大多数小型项目只是玩玩 - 它们永远不会进入生产环境。 因此，对于它们，您不需要任何其他东西...

因此，如果您使用 Chrome DevTools ，可以像下面的图像中所示使用禁用缓存方法：

如果您在使用 Firefox 时出现缓存问题：

仅在开发中执行此操作。您还需要一种机制来强制生产环境进行重新加载，因为如果您经常更新应用程序并且不提供类似于上面答案中描述的专用缓存同步机制，则用户将使用旧的缓存无效模块。

是的，这些信息已经包含在之前的答案中，但我仍然需要通过Google搜索才能找到它们。

这里所有的答案似乎都建议在命名方案中使用某种形式的版本控制，这有其不足之处。

浏览器应该通过读取Web服务器的响应，特别是HTTP标头，来了解什么需要缓存，什么不需要缓存 - 这个资源的有效期是多长时间？自从我上次检索它以来，这个资源是否已更新等等。

如果配置"正确"，只需更新应用程序的文件，就可以（在某个时候）刷新浏览器的缓存。例如，您可以配置您的Web服务器告诉浏览器永远不要缓存文件（这是一个坏主意）。

关于如何工作的更深入的解释，请参见Web缓存工作原理。

你可以使用SRI来打破浏览器缓存。每次只需更新index.html文件中的新SRI哈希值即可。当浏览器加载HTML并发现HTML页面上的SRI哈希值与资源的缓存版本不匹配时，它将从您的服务器重新加载资源。这还具有绕过跨源读取阻止的好副作用。

<script src="https://jessietessie.github.io/google-translate-token-generator/google_translate_token_generator.js" integrity="sha384-muTMBCWlaLhgTXLmflAEQVaaGwxYe1DYIf2fGdRkaAQeb4Usma/kqRWFWErr2BSi" crossorigin="anonymous"></script>