[feature request] Use immutable browser cache for all javascript requests, passing module hash in query string

[remorses]

Currently Vite uses etags to cache user js modules, for node_modules instead it sets an immutable cache-control header.

Using etags adds latency because the browser has to make a roundtrip to the dev server to check if the module was updated.

In theory it's possible to set the cache-control header to immutable if you pass the module hash in the import query string:

import thing from '/module.js?hash=k23bjd'

This way the entrypoint will import cached modules if they didn't change and get the response from the dev server if the module changed.

If the user reloads the page and all the modules are unchanged the browser will only fetch the entrypoint.

This will help with large codebases with lots of modules, it removes the overhead of doing many roundtrips to the server, which are also limited by the browser requests concurrency (which is 6 to my knowledge)

Did you already think about implementing this feature? Are there any blockers?

[bluwy]

I think this is similar to #16587 and is something @ArnaudBarre has been experimenting with.

[ArnaudBarre]

Yeah this what I've done in https://github.com/ArnaudBarre/rds, but this is closer to a POC than a usable toolchain.
The big blocker is that this changes the spirit of the tool to be on demand, because you need to pre-transform everything before sending the first file.

[remorses]

@ArnaudBarre why do you need to pre-transform everything before sending the first file? Is it needed to create the HMR module graph?

[ArnaudBarre]

No because the hash of a file depend on the content of the file, which means the imports of the file and their hash, which require to process the imports, all the way down

If you hash based on the source code content and not the transformed code, then changes to your config will not invalidate the cache