由于缓存，网站 html 不会为用户更新

Question

我正在创建一个网站，但我的用户遇到了网站缓存问题。我开发了我的网站并设置了 chrome 开发人员工具来禁用我的网站的缓存以进行开发。问题是当我发布新更改以促使我的所有用户由于浏览器缓存而无法获得更新时。当我在朋友的计算机上手动删除我网站的缓存时，它可以工作，但我显然不能指望每个人都这样做以获得新的更新。无论如何我可以通过版本控制或其他方式解决这个问题吗？我环顾四周，但似乎找不到任何东西。

编辑：我知道我可以完全阻止缓存，但我不想完全阻止看起来像糟糕设计的缓存

Answer 1

缓存的资源是什么？我怀疑 js/css 文件，处理此问题的一个好方法是将带有版本的查询参数添加到这些资源的路径中，以便在版本更改时强制浏览器加载新文件，如下所示：

<script type="text/javascript" src="your/js/path/file.js?v=1"></script>
<link href="/css/main.css?v=1" media="screen,print" rel="stylesheet" type="text/css">

当您发布网站的新更新时，请按如下方式替换版本：

<script type="text/javascript" src="your/js/path/file.js?v=2"></script>
<link href="/css/main.css?v=2" media="screen,print" rel="stylesheet" type="text/css">

浏览器会认为该文件是一个新文件，它会更新缓存。希望这会有所帮助。

为了禁用 html 缓存，您可以向文件添加元标记，如下所示：

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

但这将完全禁用具有此元标记的 html 文件的缓存，我认为没有办法像使用 js/css 文件那样轻松处理此问题，您可以设置元标记以在将来刷新 html日期虽然。如果您需要更多信息，这里有一篇文章描述了如何使用该元标记：

http://www.metatags.info/meta_http_equiv_cache_control

Answer 2

您可以强制页面在一定时间或其他条件后自动重新加载。

<META HTTP-EQUIV="refresh" CONTENT="15">

或者让它更受事件驱动：

<A HREF="javascript:history.go(0)">Click to refresh the page</A>

您应该能够根据您的特定需求操纵这些解决方案中的任何一个。

Answer 3

一些开发人员将代码注入到他们的 .htaccess 文件中以缓存图像、.css 和 .js 文件。 如果你做过类似的事情，考虑删除这些代码行，或者在每行前面用“#”注释掉它们。

如果你不知道我在说什么，

# CACHING FREQUENTLY USED FILES     (Commenting on an .htaccess file)

<filesMatch ".(ico|jpg|jpeg|png|webp|gif)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(css|js)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

<filesMatch ".(woff|woff2)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

缓存资源是防止从服务器重复下载资源的好方法。但是，如果您要对网站进行更改，我建议您仅在最终版本发布后进行缓存！

Answer 4

您可以更改 CSS 文件的名称。我通常在末尾添加一个数字。然后清除服务器上的缓存。只需确保将所有标题链接中的链接更改为您的 css 文件即可。