Chrome 无法识别我对 javascript 文件的更改并加载旧代码？答案

【问题标题】：Chrome doesn't recognize my changes on my javascript file and loads old code?Chrome 无法识别我对 javascript 文件的更改并加载旧代码？
【发布时间】：2017-03-08 15:33:41
【问题描述】：

我已经在这里坐了将近一个小时来测试我正在构建的网站。因为我想从我的代码中看到新的更改，所以我重新加载了，但它正在重新加载旧的。我打开了 devetools 来硬重载和 empy cache hard reload，它们都加载了我的旧代码。我进入了隐身模式，它做了同样的事情。我再次去 devtools 从设置中禁用缓存并检查了网络选项卡中的禁用缓存；它仍然缓存我的旧代码。清除缓存的附加组件也不起作用。伙计，我以前没有遇到过这个问题，它只发生在昨晚，今天最严重。

我现在很迷茫，因为 chrome 没有从我的 javascript 文件中加载我的新更改。有解决方案吗？

【问题讨论】：

从 devtools 打开文件并检查它是否是当前的，这将打开它的最后一个版本并更新缓存。如果它是旧的，那么它没有被缓存，你只是没有保存/导出/移动文件到你正在读取它的文件夹。
<script src="script.js?12213123"></script>
如果仍然加载旧代码，我的猜测是服务器正在为旧代码提供服务。
另外，在构建时，禁用网络服务器中的缓存并禁用 nginx 或任何其他类似的缓存。
（供以后参考，Ctrl+F5强制刷新不从缓存加载更快）

标签： javascript google-chrome caching

【解决方案1】：

解决此问题的一种方法是强制重新加载资源以避免缓存。您可以使用 http get 参数修改 url：

变化：

<script src="myscripts.js"></script>

到：

<script src="myscripts.js?newversion"></script>

newversion 可以是任何字符串，因为它将被忽略。一个有用的选项是使用代码的日期或版本。

当我遇到同样的问题并希望确保所有客户端（不仅仅是我自己的浏览器！）都能运行新版本的代码时，我发现这种解决方法特别有用。

【讨论】：

谢谢！它终于认识到我的新变化。我想我会在这里再坐一个小时尝试自己修复它。感谢您的帮助:)
不客气。感谢您接受答案:-)
这绝对是一个 hack，因为服务器应该总是向您发送新文件是文件更改。问题应该从服务器解决。

【解决方案2】：

我认为还有更好的方法：

您可以使用 PHP 将 JavaScript 文件的最后修改日期添加到该文件的 URI。

<script src="js/my-script.js?<?php echo filemtime('js/my-script.js'); ?>"> 
</script>

浏览器会收到：

<script src="js/my-script.js?1524155368"></script>

如果文件更新，文件的 URI 将自动更改。

这样浏览器仍然可以缓存未更改的文件，同时立即识别更改。

【讨论】：

【解决方案3】：

您是否使用任何类型的编译工具（如 gulp 或 grunt）？您的代码中可能存在错误，并且该工具未编译更新的代码。

否则，@airos 建议的解决方案应该有效。将任何唯一的查询字符串附加到您的 JS 的引用将始终在第一次重新加载时提供一个新的副本（因为浏览器将缓存一个新的 URL）。

【讨论】：

不，我只是使用 devtools 来检查我的代码有时会发生什么。我前一阵子检查时没有看到任何错误。
您是否也在 devtools 中进行更新？您是否尝试过@airos 建议的解决方案？
是的，我使用了他的解决方案。另外，感谢您帮助和回复此主题。
这是我的问题，npm 崩溃了，没有重新编译，旧代码仍在运行。这令人困惑。