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

小编典典

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

spring

我注意到一些浏览器（特别是Firefox和Opera）非常热衷于使用.css和.js文件的缓存副本，即使在浏览器会话之间也是如此。当你更新这些文件之一但用户的浏览器继续使用缓存的副本时，这会导致出现问题。

问题是：强制用户浏览器在文件更改后重新加载文件的最优雅方法是什么？

理想情况下，该解决方案不会强制浏览器在每次访问页面时重新加载文件。我将发布自己的解决方案作为答案，但我很好奇是否有人有更好的解决方案，我将让你决定。

更新：

经过一段时间的讨论后，我发现John Millikin和da5id的建议很有用。事实证明有一个术语：自动版本化。

我在下面发布了一个新答案，该答案是我原来的解决方案和约翰的建议的结合。

SCdF建议的另一个想法是将伪查询字符串附加到文件中。（一些由pi提交的将时间戳自动用作伪查询字符串的Python代码。）但是，关于浏览器是否将使用查询字符串缓存文件存在一些讨论。（请记住，我们希望浏览器缓存文件并在以后的访问中使用它。我们只希望它在更改后再次获取文件。）

由于尚不清楚假查询字符串会发生什么，因此我不接受该答案。

阅读 1461

2020-04-23

共1个答案

小编典典

更新：重写以合并John Millikin和da5id的建议。该解决方案是用PHP编写的，但应易于适应其他语言。

更新2：结合尼克·约翰逊（Nick Johnson）的意见，即原始.htaccess正则表达式可能会导致文件问题json-1.3.js。解决方案是仅在末尾恰好有10位数字时才重写。（因为10位数字涵盖了从9/9/2001到11/20/2286的所有时间戳。）

首先，我们在.htaccess中使用以下重写规则：

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

现在，我们编写以下PHP函数：

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

现在，无论你在哪里包含CSS，都可以从以下位置进行更改：

<link rel="stylesheet" href="/css/base.css" type="text/css" />

对此：

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

这样，你无需再次修改link标记，并且用户将始终看到最新的CSS。浏览器将能够缓存CSS文件，但是当你对CSS进行任何更改时，浏览器会将其视为新的URL，因此它将不使用缓存的副本。

这也可以用于图像，图标和JavaScript。基本上任何不是动态生成的。

2020-04-23