Code splitting is an operation performed by a bundler that splits code into chunks.
You can then load only what is needed for a page to render.
It's also known as route-chunking (where route refers to http route, ie a route is equivalent to a page)
In large web applications, it is often desirable to split up the app code into multiple JS bundles that can be loaded on-demand (ie lazy loaded).
This function is also called:
It helps to increase the performance of your application by reducing the size of the initial JS payload that must be fetched.
If you want to create multiple entry points that are targeted to different users.
The best way to introduce code-splitting is to use the dynamic import() syntax as most bundlers will detect this statement.
Example:
import("./module-to-lazy-load").then(export => {
// computation
});
It's supported by webpack 1) (and therefore by all derived applications such as NextJs
See React Lazy