What is "code splitting"?

JavaScriptJunior~2 min read

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

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.