Webpack code splitting: ChunkLoadError – Loading chunk X failed, but the chunk exists

The chunk is reachable doesn’t mean the user’s browser can parse it. For example, if the user’s browser is old. But the chunk contains new syntax. Webpack loads the chunk by jsonp. It insert <script> tag into <head>. If the js chunk file is downloaded but cannot parsed. A ChunkLoadError will be throw. You can … Read more

How to overcome loading chunk failed with Angular lazy loaded modules

UPDATED SOLUTION BELOW Preferred solution is converting to PWA I had the same problem and found a pretty neat solution that is not mentioned in the other answers. You use global error handling and force app to reload if chunks failed. import {ErrorHandler, Injectable} from ‘@angular/core’; @Injectable() export class GlobalErrorHandler implements ErrorHandler { handleError(error: any): … Read more

Webpack 4 – create vendor chunk

In order to reduce the vendor JS bundle size. We can split the node module packages into different bundle files. I referred this blog for splitting the bulky vendor file generated by Webpack. Gist of that link which I used initially: optimization: { runtimeChunk: ‘single’, splitChunks: { chunks: ‘all’, maxInitialRequests: Infinity, minSize: 0, cacheGroups: { … Read more

How to dynamically load reducers for code splitting in a Redux application?

Update: see also how Twitter does it. This is not a full answer but should help you get started. Note that I’m not throwing away old reducers—I’m just adding new ones to the combination list. I see no reason to throw away the old reducers—even in the largest app you’re unlikely to have thousands of … Read more