Suggest an edit

Improve this article

Refine the answer for “What is "code splitting"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What Code Splitting is

**Code splitting** is a process where your JavaScript bundle (usually one large file) **is broken up into several smaller parts (chunks)**.
The browser loads **only the parts of the code it actually needs**, and the rest **on demand** (lazily).

The idea:

> Instead of one giant `bundle.js`, load only the code the user actually needs for the current screen.

## Why this matters

Without code splitting:

- the browser downloads **all of the application's code at once**,
- including code that will **never even run**.

This increases:

- the size of the first request (`bundle.js` can be tens of MB),
- the page load time,
- the script execution time (JS parsing and compilation).

With code splitting:
Only the "piece" of code you need loads → a faster "Time to Interactive"
The rest of the parts load **only when the user navigates** to other pages or takes other actions.

## How it works

Code splitting is usually implemented by a bundler (e.g. **Webpack**, **Vite**, **Next.js**)
and relies on **dynamic import**:

```javascript
// a regular import - loads immediately
import heavyLib from './heavy-lib';

// a dynamic import - loads on demand
const module = await import('./heavy-lib');
```

`import()` returns a **Promise** that loads the module **only when it is actually needed**.

## Example (React)

### Without code splitting:

```javascript
import About from './About';

function App() {
  return <About />;
}
```

Here `About` loads immediately, even if the user never opens that page.

### With code splitting (lazy loading):

```javascript
import React, { lazy, Suspense } from 'react';

const About = lazy(() => import('./About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <About />
    </Suspense>
  );
}
```

Here `About` is loaded **only when it's actually needed** -
for example, when navigating to the "About" page.

## Types of code splitting

| Type | What it does | Example |
|---|---|---|
| **Entry splitting** | Splits code by entry points (e.g. `admin.js`, `user.js`) | Webpack `entry` |
| **Vendor splitting** | Separates third-party libraries (`react`, `lodash`) from your code | `optimization.splitChunks` |
| **Dynamic import splitting** | Splits code by dynamic imports (lazy loading) | `import('./module')` |
| **Route-based splitting** | Splitting by pages (in Next.js, React Router, etc.) | Automatic, by route |

## How Next.js does it

In **Next.js**, code splitting is built in out of the box:

- Each page (`pages/about.tsx`, `pages/contact.tsx`) becomes a **separate chunk**.
- Only the current page's code is loaded.
- On navigation, Next.js **preloads the JS for the next page** in the background.

So you don't need to call `import()` explicitly - Next.js does it automatically.

## An example of the benefit

| Scenario | Without splitting | With splitting |
|---|---|---|
| Home page | 3 MB of JS loads | 300 KB loads |
| User navigates to /about | The whole bundle loads | Another 100 KB loads |
| Load time | 5 sec | 1 sec to first screen |

## Summary

| Point | Description |
|---|---|
| What it is | Splitting the application's code into independent parts |
| Goal | Speed up loading and improve performance |
| Implementation | Via `import()` or automatically (Next.js, Webpack, Vite) |
| Benefits | Smaller bundle, faster TTI, less memory |
| Where it's used | React, Next.js, Vue, Angular, Webpack, Vite |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts560 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.