css/js 上的客户端缓存

Question

首先我应该说我花时间阅读了这种情况下的所有主题但没有成功，最近我在我的网站上遇到了客户端/浏览器缓存的问题，它没有任何变化。服务器端缓存很好，但客户端工作很糟糕，我应该每次都按 CTRL+F5，我不想要这个，因为它对用户不利，我知道我可以在 devTool 打开时禁用缓存，但我说的不仅仅是我自己。这也发生在台式机和移动设备上。在移动设备上，我应该去设置/隐私/清除缓存。

这是我与缓存相关的网站代码：

htaccess:mod_expires

ExpiresByType text/css "access plus 1 month"

我从 gzip 中删除了 css，但没有成功。也将 1 个月更改为 1 秒。

mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

PHP 标头：

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Pragma: no-cache");
header("Vary: Accept-Encoding");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

HTML 元：

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

如您所见，我尝试了所有可能的方法来与烦人的缓存作斗争，但没有成功。我知道我可以在css 或js 的末尾添加version，但都知道这是清除缓存的坏习惯：

从静态资源中删除查询字符串

带有“？”的资源在 URL 中没有被某些代理缓存缓存 服务器。删除查询字符串并将参数编码到 以下资源的 URL：

source

那么，在正确的方向上删除css 和js 重缓存的最佳方法是什么？

Answer 1

<?php $filename "path/to/file.css";  ?>
<script src="<?php echo $filename; ?>?ver=<?php echo filemtime($filename); ?>"> 

这将缓存在浏览器中，但是当您对文件进行更改时，文件时间将被更新，客户端将获得文件的新副本。

Answer 2

尝试使用HTTP Etags。这将允许客户端推断是否需要从服务器重新加载资源。

Answer 3

这每次都有效：在文件末尾添加? + random stuff。例如：

<script src="path/to/file.css?8768316833"></script>

在 PHP 中，我认为应该这样做（我已经很多年没有写过任何 PHP 了，但这里是 :)

<script src="path/to/file.css?<?php echo rand() ?>"></script>"

这将强制浏览器每次都下载文件的新副本。