How to handle deploys with Webpack code splitting?

As Max Stoiber writes on spectrum.chat:

ServiceWorkers come in really handy when doing code splitting!

We use the excellent offline-plugin by @nekr to cache all the current bundles locally, so no matter if the server updates the files or not the ServiceWorker will always serve the files from the local cache. Every hour it will check the server for updates and, if an update is available, download all the fresh bundles from the remote server and cache them locally. The next time the user restarts the app the new version of the app is used!

https://github.com/NekR/offline-plugin

This solution means your app downloads all the chunks up front, which defeats the purpose of code splitting in terms of bandwidth, but at least you still retain the benefit of only parsing the chunks you need to load the app, which for me is significant on slow devices. Also, browser refreshes/caching now involves the Service Worker lifecycle (see "Waiting" at https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle).

This problem is extremely well stated.

I will add though that "Deletion" might not be the right name for whats happening, depending on the setup.

My initial response to this problem was that this was a caching problem. That old chunk files were being picked up instead of the new one. Its close to what was happening at least in my case I had the following:

index.js

const Page1 = lazy(() => import('./page/Page1'));
const Page2 = lazy(() => import('./page/Page2'));

const main = () => {
  {
    '/page1': Page1,
    '/page2': Page2,
  }[window.location.href](); /* Some Render Router Implementation */
};

1. V1 Deployed at (https://my-domain/distribution_folder/*)
2. User would load V1 index.js
3. V2 Deployed at (https://my-domain/distribution_folder/*)
4. User (who hadn't refreshed) would dynamically load a chunked route using their cached V1 index.js file.
5. Request would be sent to (https://my-domain/distribution_folder/{page_name}.{chunk_hash}.js)
6. A chunk error would occur because that unique chunk would no longer be there.

Its interesting because the provider that was being used was migrating traffic to the new version. So I thought that would be the end of it but what I wasn't realizing was that any user could still be using a previously deployed version - How would they know? They're already using the application. The browser already downloaded the application (index.js).

The solution really depends on where you're dynamically importing these chunks. In the case above since they're page routes we can do a hard refresh when the user requests a different page when we can't find a chunk. This assumes however that your Cache-Control headers are setup correctly though. For example:

• index.js -> Cache-Control: no-store
• page/{page_name}.{chunk_hash}.js -> Cache-Control: public,max-age=31536000,immutable

We can make these chunks immutable because sometimes they don't change between releases and if they don't change why not use the cached version. However, index.js cannot be stored in the cache because this is the "router" that dynamically loads the content and this will always change.

Pros

• No more chunk load errors
• We don't need to load everything on first page load
• Less complexity by not having a service worker

Cons

• This approach forces a refresh for users

Related Questions

• Webpack Code Splitting 'Loading chunk failed' error wrong file path
• Angular 2 Error: Loading chunk failed many times
• Webpack - Loading chunk 0 failed
• ChunkLoadError: Loading chunk XY failed. - Randomly getting fatal on PRODUCTION