Handle "Loading chunk failed" errors with Lazy-loading/Code-splitting

DoNOT cache the entry file(usually index.html).We add:

expires 0;add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate';

in our nginx server config.

Then, after you refreshed the client's code, you can use the vue-router's error hook to detect the error and do something properly.

As long as you have a versioned API, you can use the old app files (just leave them on the server and delete after a vew days).

You will get problems as soon as your API changes during deployments.

I assume, you deploy a new API each time you deploy new JS code.

Then you can:

• Pass on the API version (simply use the git hash) to the application as header with every response (JS resources, CSS, API requests, 404 responses)
• Store the API version in your main JS entry point (or make it accessible somehow, e.g. as generated constant)
• On each server response, check if the Server version matches your main client version.
• If it does not: Display a prominent warning to the user (like the cookie banners) that he should reload the page (=> allows the user to save chnages in hope the API did not change for that save button).

For async components, we display normal 'not found' messages if loading fails, together with a reload button that appears instead of the component. Reloading without user interaction will cause a lot of confusion.