停止Chrome缓存我的JS文件

Question

停止Chrome缓存我的JS文件

javascriptcachinggoogle-chrome

153

我将更改我的JS文件，但在浏览器中实际上并不会发生变化，我必须每次重命名文件才能重新加载它。有没有一种类似于.htaccess的命令或其他东西可以停止缓存？

它甚至强制缓存我的html页面。我需要重新打开整个浏览器才能看到更改。这可能是服务器问题吗？

- Howdy_McGee

启用Web服务器中的ETag标头是否会导致Chrome缓存但在文件更改时正确检索新副本？ - Developer Webs

15个回答

65

更快的方法是右键单击地址栏旁边的刷新图标，然后选择清空缓存并强制重新加载

只需确保Chrome的开发工具已打开。（按F12键）顺便说一句...这个技巧仅适用于Windows、Ubuntu和Mac OS上的Chrome浏览器。

- Nicole Rivers

2

FYI，我尝试了所有这些方法，但没有一种是有效的。在我的电脑上（使用Mountain Lion的默认设置），F12键显示仪表板。 - Aubrey Goodman

2

它比被接受的答案好在哪里？您可以使用被接受的答案重新加载。 - SSH This

不行，至少我做不到。所有的答案对我都没有用，仍然会弹出一个警告，这个警告已经在我的本地js文件中被删除了，但它仍然存在于Chrome的缓存js文件中。 - Burak Karakuş

1

对我来说可以工作。确保开启了开发者工具，否则右键不会显示菜单。 - Venryx

我看到了这个选项，但在我的情况下，脚本没有刷新。 - justian17

28

点击刷新按钮（F5）时，按住 Shift 键。

这将强制网页浏览器忽略已缓存内容，并从服务器重新请求新的版本页面。使用 Shift + F5 可以确保始终加载最新的网站内容。然而，根据页面大小，它通常会比只使用 F5 更慢。

- StilesCrisis

15

使用PHP生成的随机数，添加类似于script.js?a=[随机数]的内容。

您是否尝试过设置expire=0，以及使用Pragma头部中的"No-Cache"，和cache-control=NO-CACHE指令？（我不确定它们是否适用于脚本文件。）

- EGOrecords

2

我偶然发现了这个问题并浏览了一些答案。这是一个可怕的想法，因为：1）在每次请求时生成随机数将导致浏览器在每次访问时重新下载文件。您需要一个“构建时间”值，以便在对站点进行更改时仅在浏览器重新生成该值。由于PHP是运行时解释的，因此您可能需要在部署时执行它。2）生成随机数意味着有时（随着时间的推移概率增加），浏览器会使用一些旧的缓存副本。如果必须在请求时执行，请使用时间戳！ - JakeRobb

我正在进行这个操作，并使用构建版本号，在标题缓存值上设置了合理的超时时间（1天）。 - Worthy7

11

几个想法：

在Chrome浏览器中刷新页面时，使用CTRL + F5进行完全刷新。
即使将过期时间设置为0，它仍会在会话期间缓存。您需要关闭并重新打开浏览器。
确保在将文件保存到服务器上时，时间戳得到更新。 Chrome首先发出一个HEAD命令而不是完整的GET命令来查看是否需要再次下载完整文件，服务器使用时间戳。

如果您想在服务器上禁用缓存，可以这样做：

Header set Expires "Thu, 19 Nov 1981 08:52:00 GM"
Header set Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
Header set Pragma "no-cache"

在 .htaccess 文件中。

- Mike Christensen

1

我之前有这个，但是加上 pre-check=0, post-check=0 才让我成功了。 - TadLewis

8

快速步骤：

1）打开开发者工具仪表板，方法是进入Chrome菜单 -> 工具 -> 开发者工具

2）点击右侧的设置图标（它是一个齿轮！）

3）勾选“禁用缓存（当DevTools打开时）”框

4）现在，在仪表板上，只需点击刷新，JS就不会被缓存！

- StackG

1

然而，使用WebStorm调试并不起作用。当DevTools打开时，WebStrom无法附加调试器。 - Alexander Volkov

6

问题在于Chrome需要在Cache-Control头中包含must-revalidate，以便重新检查文件是否需要重新获取。您可以始终使用SHIFT-F5强制刷新Chrome，但如果您想在服务器上解决此问题，请包含此响应头：

Cache-Control: must-revalidate

这段内容告诉Chrome去检查服务器是否有更新的文件。如果有，就会在响应中接收到。否则，它将会收到一个304响应，并确保缓存中的文件是最新的。如果你没有设置这个头部信息，在没有任何其他设置使文件失效的情况下，Chrome将永远不会与服务器检查是否有更新版本。这里有一篇博客文章进一步讨论了这个问题：博客文章。

- AgilePro

1

我认为应该使用Cache-Control: must-revalidate而不是Cache-Control: must-validate。我认为后者是无效的。 - László Monda

3

在更新我的网络应用程序时，我要么使用处理程序返回单个JS文件以避免对我的服务器造成巨大负荷，要么为它们添加一个小的查询字符串：

<script type="text/javascript" src="/mine/myscript?20111205"></script>

- Ryan Ternier

2

虽然这看起来像是一个巧妙的做法，但是你可能会遇到一些代理的问题，当它们发现查询字符串时就会停止缓存：https://developers.google.com/speed/docs/best-practices/caching#LeverageProxyCaching - Francois Bourgeois

2

那么你应该做什么呢？ - BlueSky

1

我知道这是一个“老”问题。但缓存的问题从来不会消失。经过大量试错，我发现我们的一个Web托管提供商通过CPanel拥有了名为Cachewall的应用程序。我只需单击“启用开发模式”，然后...... voilà！它立即停止了长时间的痛苦 :) 希望这对其他人有所帮助... R

- Ramon Araujo

1

<Files *>
Header set Cache-Control: "no-cache, private, pre-check=0, post-check=0, max-age=0"
Header set Expires: 0
Header set Pragma: no-cache
</Files>

- Alfabravo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MartinHN · Accepted Answer

218

您可以在右上角点击设置图标 ... | 更多工具 | 开发者工具 | 网络 | 在 DevTools 打开时禁用缓存。

对于 Windows，可以使用 F12 或 CTRL + SHIFT + I，而在 Mac 上，使用 CMD + SHIFT + I 可以打开开发者工具。 Chrome 更新 2018 年 9 月的新路径： 点击右上角的设置图标 ... | 设置 | 首选项 | 开发者工具 | 网络 | 在 DevTools 打开时禁用缓存。

- MartinHN

4

Chrome的一个重大故障是无法缓存某些内容，即使页面被标记为“无缓存”。不过至少目前这样可以使用，用户可能会受影响，但至少我可以继续开发。 - Robert Noack

5

请注意，“Settings”已不再位于右下角！请点击右上方的三个点菜单以进入设置。 - yizzlez

4

位置：右上角 | "..." | 设置 | 首选项 | 网络 | "禁用缓存"（在开发者工具打开时）。 - atom88

5

这是非常糟糕的做法！！！不，你不应该为自己的使用而使用临时的hack...你应该为所有用户提供一个永久的解决方案。最好的方式是在src的末尾添加一个随机查询字符串。src="someJs.js?someRandomStringCreatedByInlineJsOrServerRenderedCode" 这将保证每次都有最新的版本。一个好的随机字符串可以是获取今天的日期/时间并将其插入其中。你可能需要将其转换为字符串，因为它可能是一个日期对象。选择这个答案并且被高度赞同真的非常糟糕。 - user1816910

1

截至Chrome 61.0.3163.100版本，现在该选项似乎位于“更多工具/网络条件”下。已不再存在“开发者工具”选项。 - justian17

显示剩余2条评论