SPA: Lazy loading / code splitting components & code changes

[Oskar]

Feature request

I'm using code splitting / lazy loading of components that are partly split based on which page you are at. However if I deploy a new version all the hashes changes and the old files are gone using this module. So then changing page just gives a 404 error when it requests that's page js.

https://webpack.js.org/guides/code-splitting/

I have tried webpack standard splitting:

const ProductViewContainerComponent = () => {
    return import(/* webpackChunkName: "ProductViewContainerComponent" */ 'ProductViewContainerComponent').then(({ default: ProductViewContainerComponent })).catch((error) => {
       window.location.reload();
    });
}

And loadable/component

const ProductViewContainerComponent = loadable(() => import(/* webpackChunkName: 'ProductViewContainer' */'../components/ProductViewContainer'), {
  fallback: '',
});

But the import command itself doesn't seem to be try-catchable, even when done it still breaks the page.

What is the expected behavior?
Some way to keep old files for a defined time.

What is motivation or use case for adding/changing the behavior?
Sites not being broken during new deployments

How should this be implemented in your opinion?
Allow an option to only delete files after x amount of days. So it can for example only delete files that haven't changed for 30 days.

For now I have to stop using this plugin :'(

[Christopher Wiles]

I run into this issue a lot Uncaught Error: Loading chunk # failed

Seems it can be caused by two issues.

1. A bad network, one can add retry logic for fetching lazy-loaded components
2. New deployments, the client will try to access the old chunk and you will see this issue

I think an option to keep the X previous build would be great.