Our team is currently working on a Vue.js application using Vue CLI 3, Vue Router, and Webpack. The routes are lazy-loaded and the chunk file names include a hash for cache busting purposes. So far, everything has been running smoothly.
However, we encountered a deployment issue that follows these steps:
- A user accesses the application (starting at route "/"), loading the main chunk file.
- We make changes to the application and deploy a new version.
- The old chunk files are deleted
- New chunk files are added, resulting in changes to the hash in their names
- A user clicks on a link to navigate to another route (e.g. "/foo")
- An error occurs as the application attempts to load a chunk file that has been renamed:
(this may pertain to CSS or JavaScript)Error: "Loading CSS chunk foo failed. (/assets/css/foo.abc123.css)"
- An error occurs as the application attempts to load a chunk file that has been renamed:
What is the best solution to prevent these errors?
One possible approach is to retain the old chunk files temporarily and delete them later. However, this complicates the deployment process, requiring you to manage old versions and include old chunk files when deploying new updates.
Another (less sophisticated) solution is to reload the page when such an error is detected (e.g. Vue Lazy Routes & loading chunk failed). While this method somewhat resolves the issue, it reloads the previous route instead of the new one. Nevertheless, it ensures that subsequent route changes function correctly.
Do you have any other suggestions? Perhaps there's a webpack feature that could address this issue?