Why is vite HMR slow to react to changes after no changes happen for a few seconds?

[basro]

I've noticed that Vite HMR takes a few seconds to show changes on the browser the first time I make a change, but subsequent changes are instantaneously reflected in the browser.

If I don't make any changes for 10 seconds and try again then the delay happens again.

Feels like Vite falls asleep waiting for changes.

This is a bit annoying, I'd like to know why it happens and if there's anything I can do to prevent from Vite from sleeping like this.

[basro]

Investigating a bit I've noticed this:

Vite is immediately notifying the browser about the changes through the websocket channel.
The Browser is then requesting the modified assets immediatly but vite's response is slow.

[patak-dev]

I haven't seen this before. Would you try in an incognito session so you don't have any extension? Maybe antivirus could also be getting in the way? You could take a cpuprofile using --profile then P + enter to investigate too (open it in https://www.speedscope.app/)

[basro]

I've run it with
DEBUG="vite:transform" npx vite --profile
vite prints this when notifying the browser about changes:
[vite] hmr update /styles/styles.scss?direct
Then several seconds elapse and this prints:
vite:transform 127.94ms /styles/styles.scss?direct +10s

When looking at the profile I see this: (which I believe is responsible for the first print)

Followed by a lot of nothing for several seconds until this: (which I believe is the moment of the second print)

So whatever is causing those several seconds of delay is not showing up in this profile.

[basro]

Ok, an update:

This seems to be only happening in firefox (private tab or not). I've now tried with chrome and the problem doesn't manifest there.

and Windows 10 is the OS

[bbelbuken]

This issue still persists today. Did you find any solutions? I do not want to leave my beloved FF

[basro]

I didn't I just switched to chrome for development when using vite.

[bbelbuken]

Found the solution!!! By default, Vite sets the HMR timeout to 10seconds so I explicitly increased it to 30 seconds. The increased timeout keeps the WebSocket connection alive longer, preventing Firefox from disconnecting it during idle times. Since Firefox is more aggressive in handling idle connections, setting a longer timeout provides stability and avoids the issue where the connection is delayed after being idle.

// vite.config.js
export default {
  server: {
    hmr: {
      timeout: 30000,
      overlay: true, 
    }
  }
}