javascript - 破坏 Chrome 缓存以进行浏览器同步重新加载

Question

我的浏览器同步工作正常，但我仍然很难处理之前的 html 的缓存。即使选中了 Chrome 的“禁用缓存”，甚至在隐身模式下也是如此!

要加载页面更改，我总是必须“清除缓存并硬重新加载”。

我想知道，是否可以让浏览器同步重新加载相同的网址，但使用哈希作为查询参数？喜欢:

https://my.flask.com/?q=jsd094334jn3io482048(每次都有不同的哈希值)

我的具体设置是我正在本地域上开发 flask 应用程序:https://my.flask.com/带有自签名证书。我没有使用端口，因为我试图以各种可能的方式模仿生产。

我通过 browser-sync-webpack-plugin 和页面底部的脚本使用浏览器同步:

<script id="__bs_script__">
  document.write("<script async src='https://HOST:3060/browser-sync/browser-sync-client.js?v=2.24.4'><\/script>".replace("HOST", location.hostname));
</script>

更改时的热重载在 webpack 和浏览器同步中都可以正常工作。网页加载的资源(css、js)经过哈希处理(或指纹识别等)，因此它们被设置为绕过更改时的缓存。所以它们不是问题。

我不明白为什么/和/[route] 的重新加载会被缓存，以及如何绕过它!

感谢任何帮助

更新

此时我最好的猜测是问题不在于缓存 - 而是浏览器同步在 webpack 构建完全完成之前触发了刷新。

Answer 1

问题不是缓存，而是 browsersync 在 webpack 构建完成之前触发了刷新。添加 reloadDelay: 500 有所帮助