I have a web frontend app uses code splitting to reduce the individual file size. And it's distributed on a CDN and works most of the time.
A problem occurs when we update the project at any time. Assume that our project consists of following files:
1ef1a, as well as
bce31in the next line, is content hash)
on-demand.bce31.js on demand.
The error scenario is a user loads our page just before our update and he/she gets
main.1ef1a.js and browser caches them. And then our update happens: we replace the files, flush the CDN, and following files are get distributed:
index.htmlnow imports a new version of
Then user does something that triggers the loading of
on-demand.js, while since his/her
main.js is old, he/she requests
on-demand.bce31.js, which no longer exists, and then the page crashes.
He/she is a very nice user with patience and tries a refresh, but the browser serves the cached
main.js again and he/she cannot get ouside the loop.
We cannot assume our users to have certain knowledge to perform a "Clean cache and force reload", all we get are disappointed users who think our website sucks.
I think code splitting and CDN are both widely used techniques and there should be some nice solution that I'm missing. And what is that ?