Busting Chrome cache for browser-sync reloads

Question

I have browser-sync working OK, but I am still having a hard time with the caching of the previous html. Even with Chrome's "disable cache" checked, and even in incognito mode!

To get page changes to load I always have to "Clear Cache and Hard Reload".

I'm wondering, is it possible to have browser-sync reload the same url but with a hash as a query parameter? Like:

https://my.flask.com/?q=jsd094334jn3io482048 (with a different hash each time)

My particular setup is I'm developing a flask app on a local domain: https://my.flask.com/ with a self-signed certificate. I am not using a port because I am trying to mimic production in every possible way.

I'm using browser-sync via the browser-sync-webpack-plugin and a script at the bottom of the page(s):

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

The hot reloading on changes works as it should both in webpack and browser-sync. The assets loaded by the webpage (css, js) are hashed (or fingerprinted or whatever), so they are set up to bypass the cache on changes. SO they are not the issue.

I can't figure out why reloads of / and /[route] are getting cached, and how to bypass it!

Any help appreciated

UPDATE

My best guess at this point is that the problem isn't the cache - it's that browser-sync is triggering a refresh before the webpack build is completely finished.

Answer 1

The problem was not the cache, it was that browsersync was triggering a refresh before the webpack build was done. Adding reloadDelay: 500 has helped