Handle "Loading chunk failed" errors with Lazy-loading/Code-splitting : <p>We are developing a Vue.js application based on Vue CLI 3 with Vue Router and Webpack. The <a href="https://router.vuejs.org/guide/advanced/lazy-loading.html" rel="noreferrer">routes are lazy-loaded</a> and the <a href="https://webpack.js.org/guides/caching/" rel="noreferrer">chunk file names contain a hash</a> for cache busting. In general, everything is working fine.</p>

<p>However, there is a problem during the deployment. Steps to reproduce are the following.</p>

<ul>
<li>User opens the application (let's assume route "/"), thus the main chunk file is loaded.</li>
<li>We change something in the application and deploy a new version.

<ul>
<li>Old chunk files are removed</li>
<li>New chunk files are being added (i.e. hashes in the chunk file names change)</li>
</ul></li>
<li>User clicks a link to another route (e.g. "/foo")

<ul>
<li>An error occurs as the application tries to load a chunk file that has been renamed: <code>Error: "Loading CSS chunk foo failed.
(/assets/css/foo.abc123.css)"</code> (this might be CSS or JavaScript)</li>
</ul></li>
</ul>

<p><strong>What is the best way to avoid errors like this?</strong></p>

<ul>
<li><p>One approach that should work is just to retain old chunk files and delete them at a later time. That, however, complicates the deployment of new versions as you need to keep track of old versions and always also deploy the old chunk files with the new version.</p></li>
<li><p>Another (naive) approach is to just reload as soon as such an error is detected (e.g. <a href="https://blog.francium.tech/vue-lazy-routes-loading-chunk-failed-9ee407bbd58" rel="noreferrer">Vue Lazy Routes &amp; loading chunk failed</a>). It somewhat works, but it reloads the <em>old</em> route, not the <em>new</em> one. But at least it ensure that consecutive route changes work again.</p></li>
</ul>

<p>Any other ideas? Maybe there is something in webpack that could fix this?</p>
