html强制不缓存js和css,JavaScript如何强制浏览器重新加载缓存的CSS / JS文件？

小编典典

更新： 重写以合并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标记，并且用户将始终看到最新的CSS。浏览器将能够缓存CSS文件，但是当你对CSS进行任何更改时，浏览器会将其视为新的URL，因此它将不使用缓存的副本。

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

2020-04-23