停止 Chrome 缓存我的 JS 文件

Posted 2023-02-22

技术标签:

【中文标题】停止 Chrome 缓存我的 JS 文件【英文标题】：Stop Chrome Caching My JS Files 【发布时间】：2012-01-13 14:44:17 【问题描述】：

我将对我的 JS 文件进行更改，但它不会在浏览器中真正更改，我必须每次重命名文件以便重新加载它。我可以添加某种 .htaccess 命令或使其停止缓存吗？

它甚至缓存了我的 html 页面。我需要重新打开整个浏览器才能查看更改。会不会是服务器问题？

【问题讨论】：

在您的网络服务器中启用 ETag 标头是否会导致 Chrome 缓存但在文件更改后正确检索文件的新副本？ 【参考方案1】：

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

对于 windows，这是 F12 或 CTRL + SHIFT + I 而在 mac CMD + SHIFT + I 打开 DevTools。 p>

2018 年 9 月 Chrome 更新的新路径：

点击右上角的设置图标... | 设置 | 偏好 | 开发者工具 | 网络 | 禁用缓存（在 DevTools 打开时）

【讨论】：

chrome 缓存内容的重大失败......即使页面被标记为无缓存......哦，至少这是可行的，用户可能会受到影响，但至少我可以开发请注意，“设置”不再位于右下方！点击右上角中的三个点菜单进入设置。位置是：右上角 | “……” |设置 |偏好 |网络 | “禁用缓存”（在 DevTools 打开时）。这是非常糟糕的做法！！！不，你不应该有一个临时的hack供你使用……你应该为你的所有用户提供一个永久的解决方案。最好的方法是在 src 末尾添加一个随机查询字符串。 src="someJs.js?someRandomStringCreatedByInlineJsOrServerRenderedCode" 这将使它每次都有一个新版本。一个好的随机字符串是抓取今天的日期/时间并将其放入其中。你可能不得不把它变成一个字符串，因为它可能是一个日期对象。这真是太糟糕了，这是选择的答案并获得了如此多的支持。从 Chrome 61.0.3163.100 开始，该选项现在似乎存在于更多工具/网络条件下。 “开发者工具”选项不再存在。【参考方案2】：

执行此操作的更快方法是右键单击地址栏旁边的刷新图标并选择清空缓存和硬重新加载

只需确保 Chrome 的开发工具处于打开状态即可。（按 F12）顺便说一句……这个技巧只适用于 Windows、Ubuntu 和 Mac OS 的 Chrome

【讨论】：

仅供参考，我尝试了所有这些，但绝对没有奏效。在我的机器上（使用 Mountain Lion 的默认设置），F12 显示仪表板。它比公认的答案好多少？您可以使用接受的答案正常重新加载。不，你不能。至少我不能。没有一个答案对我有用，仍然弹出一个警报，该警报已在我的本地 js 文件中删除，但它仍在 chrome 中的缓存 js 文件中。为我工作。确保开发工具已打开，否则右键单击将不会显示菜单。我看到了该选项，但就我而言，脚本没有刷新。【参考方案3】：

按住 Shift 的同时单击重新加载按钮 (F5)。

这会强制网络浏览器忽略缓存的内容并将网页的新副本拉入浏览器。 Shift + F5 保证将加载最新的网站内容。但是，根据页面大小，它通常比仅 F5慢。

【讨论】：

【参考方案4】：

使用 php 生成的随机数添加 script.js?a=[random Number] 之类的内容。

您是否尝试过 expire=0、编译指示“no-cache”和“cache-control=NO-CACHE”？（我不知道他们怎么说脚本）。

【讨论】：

我偶然发现了这个问题，并正在浏览答案。这是一个糟糕的想法，因为：1) 在每次请求时生成随机数会导致浏览器在每次访问时重新下载文件。您需要一个 build time 值，以便浏览器仅在您对站点进行更改时重新生成该值。由于 PHP 是运行时解释的，因此您可能需要在部署时执行它。 2）生成随机数意味着有时（随着时间的推移概率增加），浏览器会随机缓存一些旧的缓存副本。如果您必须在请求时执行此操作，请使用时间戳！我正在这样做并使用构建版本号，并且在标头缓存值上具有适当的超时（1 天）【参考方案5】：

一些想法：

HEAD

如果您想禁用服务器上的缓存，您可以执行以下操作：

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 中

【讨论】：

有这个，但 pre-check=0, post-check=0 是对我产生影响的添加。【参考方案6】：

快速步骤：

1) 转到 Chrome 菜单 -> 工具 -> 开发者工具，打开开发者工具仪表板

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

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

4) 现在，当仪表板启动时，只需点击刷新，JS 就不会被缓存！

【讨论】：

但是，使用 WebStorm 进行调试无济于事。然后 DevTools 打开 WebStrom 无法附加调试器。【参考方案7】：

问题是 Chrome 需要在 Cache-Control` 标头中包含 must-revalidate 才能重新检查文件以查看是否需要重新获取。

您始终可以按 SHIFT-F5 并强制 Chrome 刷新，但如果您想在服务器上解决此问题，请包含此响应标头：

Cache-Control: must-revalidate

这告诉 Chrome 与服务器检查，看看是否有更新的文件。如果有更新的文件，它将在响应中接收它。如果不是，它将收到 304 响应，并保证缓存中的响应是最新的。

如果您不设置此标头，则在没有任何其他设置使文件无效的情况下，Chrome 将从与服务器检查是否有更新的版本。

这是一个blog post，进一步讨论了这个问题。

【讨论】：

我认为应该是Cache-Control: must-revalidate 而不是Cache-Control: must-validate。我不认为后者是有效的。【参考方案8】：

在对我的 Web 应用程序进行更新时，我将使用处理程序返回单个 JS 文件以避免对我的服务器造成大量访问，或者向它们添加一个小的查询字符串：

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

【讨论】：

虽然这看起来是一种巧妙的做法，但您可能会遇到一些代理问题，它们会在找到查询字符串时停止缓存：developers.google.com/speed/docs/best-practices/… 那么你应该怎么做呢？【参考方案9】：

<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>

【讨论】：

【参考方案10】：

我知道这是一个“老”问题。但是缓存的麻烦从来都不是。经过大量的试验和错误后，我发现我们的一个网络托管服务提供商通过 CPanel 使用了这个名为 Cachewall 的应用程序。我只是点击了启用开发模式，然后......瞧！！！它立即停止了长期遭受的痛苦:) 希望这对其他人有帮助... 回复

【讨论】：

【参考方案11】：

当我浏览网站（在具有真实域的托管公司服务器上）时，我得到了相同的 css 文件，但我无法在 chrome 上获得更新版本。当我在 Firefox 上浏览该文件时，我能够获得该文件的更新版本。这些答案都不适合我。我的机器上也有网站文件，并使用本地 apache 服务器通过 localhost 浏览网站。我关闭了我的 apache 服务器，并且能够获取更新的文件。不知何故，我的本地 apache 服务器弄乱了 chrome 缓存。希望这可以帮助某人，因为我很难解决这个问题。

【讨论】：

【参考方案12】：

打开开发者工具

...

More Tools

Developer Tools

点击Empty Cache and Hard Reload

【讨论】：

【参考方案13】：

您可以改为打开隐身窗口。当在普通 chrome 窗口中禁用缓存仍然没有重新加载自上次缓存后我更改的 JavaScript 文件时，切换到隐身窗口对我有用。

https://www.quora.com/Does-incognito-mode-on-Chrome-use-the-cache-that-was-previously-stored

【讨论】：