Question

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

编辑：我知道我可以防止缓存，但我不想完全阻止缓存，这似乎是一个糟糕的设计

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缓存，您可以按如下方式将metatag添加到文件中：

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

但是这将完全禁用具有此metatag的html文件的缓存，我认为有一种方法可以像使用js / css文件一样轻松处理它，您可以将metatag设置为在将来刷新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 文件。

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

4 个答案: