How does Webpack chunking work?

Webpack injects some code into main. js which takes care of lazy loading async chunks and stops from loading same chunks again and again. When a route changes, React router calls a Webpack function to load a chunk file and Webpack after done loading runs it, which chunk then would internally ask React to do something.

What is JavaScript code splitting?

Code splitting is a technique where, rather than loading your scripts as one big file, you break it up into smaller parts and only load what’s needed on that page. For projects with large amounts of JavaScript, this can have a big improvement on performance.

How does code splitting work?

Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel. As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases.

Why do you need to split Webpack and react?

In the context of React, the modules which we will be splitting are going to be the different components. For that purpose we can use React Loadable. It gives us access to a higher order component to do the dynamic import.

Is there way to enable code splitting in react?

To “enable” code splitting the only thing required is a dynamic import. As already mentioned in the TypeScript configuration changes and in the React setup the use of dynamic imports is the key to code splitting. A basic example is shown in the webpack code splitting guide to lazily load lodash.

How to split Webpack into a separate bundle?

The way we signal to Webpack what we want to split into a separate bundle is by using dynamic imports. The import keyword can be used as a function which takes the path to the module we want to be split in a separate bundle and returns a promise. When the module is loaded and the promise resolves we can have access to what it exports.

How does code splitting work with typescript and webpack?

Dynamic imports were introduced in TypeScript 2.4 . This allows imports to be executed dynamically to lazy load modules. However, for code splitting to work with webpack these dynamic imports must be left as is and not transpiled by TypeScript.