What is Code Splitting?

Developers usually split their applications into multiple pages that can be accessed from different URLs. Each of these pages becomes a unique entry point into the application.

Code-splitting is the process of splitting the application’s bundle into smaller chunks required by each entry point. The goal is to improve the application's initial load time by only loading the code required to run that page.

Next.js has built-in support for code splitting. Each file inside your pages/ directory will be automatically code split into its own JavaScript bundle during the build step.

Further:

• Any code shared between pages is also split into another bundle to avoid re-downloading the same code on further navigation.
• After the initial page load, Next.js can start pre-loading the code of other pages users are likely to navigate to.
• Dynamic imports are another way to manually split what code is initially loaded.