Code Splitting

It's a fundamental technique in modern frontend development that can significantly improve your application's performance.

In JavaScript, traditional bundling works by combining all your code into a single large file. While this ensures everything is available, it means users have to download the entire application before they can use any part of it which is not efficient. This is where code splitting comes in.

Here's a practical example to illustrate code splitting:

1// Without code splitting - everything loads at once
2import HomeComponent from './Home';
3import ProfileComponent from './Profile';
4import SettingsComponent from './Settings';
5
6// With code splitting - components load on demand
7const HomeComponent = React.lazy(() => import('./Home'));
8const ProfileComponent = React.lazy(
9  () => import('./Profile')
10);
11const SettingsComponent = React.lazy(
12  () => import('./Settings')
13);

Code splitting offers several key benefits:

First, it reduces the initial bundle size. Instead of loading your entire application upfront, users download only what they need for the current page or feature. This leads to faster initial page loads - imagine if Facebook made you download all its features before you could see your news feed!
Second, it enables more efficient caching. When you update one part of your application, users only need to download the changed chunks, not the entire application again.
Modern JavaScript frameworks provide different ways to implement code splitting:

1// Route-based code splitting in React
2import {
3  BrowserRouter,
4  Route,
5  Switch,
6} from 'react-router-dom';
7import React, { Suspense } from 'react';
8
9// Each route becomes a separate chunk
10const Dashboard = React.lazy(
11  () => import('./routes/Dashboard')
12);
13const Settings = React.lazy(
14  () => import('./routes/Settings')
15);
16
17function App() {
18  return (
19    <BrowserRouter>
20      <Suspense fallback={<div>Loading...</div>}>
21        <Switch>
22          <Route path="/dashboard" component={Dashboard} />
23          <Route path="/settings" component={Settings} />
24        </Switch>
25      </Suspense>
26    </BrowserRouter>
27  );
28}

You can also use code splitting for specific features or components:

1// Component-based code splitting
2function MyComponent() {
3  const [showChart, setShowChart] = useState(false);
4
5  // Chart component will only be loaded when button is clicked
6  const Chart = React.lazy(() => import('./Chart'));
7
8  return (
9    <div>
10      <button onClick={() => setShowChart(true)}>
11        Show Chart
12      </button>
13      {showChart && (
14        <Suspense fallback={<div>Loading chart...</div>}>
15          <Chart />
16        </Suspense>
17      )}
18    </div>
19  );
20}

The webpack bundler (which many frontend build tools use under the hood) handles the actual splitting of your code into smaller chunks. It analyzes your import statements and creates separate files that are loaded asynchronously when needed.

Finished reading?

Mark this topic as solved to track your progress.

What is Code Splitting?

What is Code Splitting?

Code Splitting

Finished reading?

common data fetching pitfalls