Code Splitting
Code splitting divides a large JavaScript bundle into smaller pieces that can be loaded when they are actually needed.
It reduces the amount of JavaScript required during the initial page load.
What It Means in Practice
An application may contain code for:
- Account settings
- Checkout
- Maps
- Dashboards
- Admin tools
- Interactive galleries
A visitor loading the homepage may not need all of that code immediately.
Code splitting allows separate features or routes to be delivered independently.
How It Works
Modern JavaScript tooling can create multiple chunks rather than one large bundle.
Those chunks may be loaded:
- For a specific page or route
- When a component appears
- After a user performs an action
- Through a dynamic import
The initial page can therefore start with a smaller JavaScript payload.
Why It Matters
Less startup JavaScript means less data to transfer and less code for the browser to parse, compile, and execute.
Reducing that initial workload can free the main thread and improve responsiveness measured through Interaction to Next Paint.
Common Problems
Common issues include:
- Splitting code into too many tiny requests
- Loading chunks immediately anyway
- Duplicating dependencies across bundles
- Creating noticeable delays when deferred code is finally needed
- Splitting code without measuring whether JavaScript was actually the bottleneck
- Keeping unused code inside otherwise smaller bundles
How to Improve
Split around meaningful boundaries such as routes or expensive features.
Keep startup code focused on what the initial page actually needs.
Measure network activity and JavaScript execution before and after the change instead of assuming smaller bundles automatically create a faster experience.