About
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)
Why
Lazy loading
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:
- lazy loading
- dynamic loading
It helps to increase the performance of your application by reducing the size of the initial JS payload that must be fetched.
Multiple Entry points
If you want to create multiple entry points that are targeted to different users.
How to
Pure Javascript
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
React
See React Lazy