Frontend Engineering | VoidX Academy

35. Code Splitting

Shrinking the Bundle Size

When you build a React app, tools like Vite or Webpack package all of your components, libraries, and logic into one massive JavaScript file (the "Bundle"). If a user visits your homepage, they shouldn't have to download the code for the Admin Settings page. Code Splitting divides your app into smaller chunks, loading them only when needed.

React.lazy() and Dynamic Imports

We implement code splitting using React.lazy(). Instead of importing a component normally at the top of the file, we tell React to fetch the component's file dynamically over the network only when it is about to be rendered.

import { lazy, Suspense } from 'react';

// Normal import (Always downloaded immediately)
import Navbar from './Navbar'; 

// Lazy import (Downloaded ONLY when needed)
// Notice the dynamic import() syntax
const HeavyDashboard = lazy(() => import('./HeavyDashboard'));

The <Suspense> Boundary

Because the lazy-loaded component is fetched over the network, there will be a slight delay. React requires you to wrap lazy components in a <Suspense> boundary. The fallback prop tells React what to display while the code is downloading.

export default function App() {
  const isAdmin = true;

  return (
    <div>
      <Navbar />
      {isAdmin && (
        <Suspense fallback={<div className="spinner">Loading Dashboard modules...</div>}>
          <HeavyDashboard />
        </Suspense>
      )}
    </div>
  );
}

Route-Based Code Splitting

The most effective place to use Code Splitting is at the route level. By lazy-loading your page components in React Router, you guarantee users only download the specific page they navigate to.

35. Code Splitting

Shrinking the Bundle Size

React.lazy() and Dynamic Imports

import { lazy, Suspense } from 'react';

// Normal import (Always downloaded immediately)
import Navbar from './Navbar'; 

// Lazy import (Downloaded ONLY when needed)
// Notice the dynamic import() syntax
const HeavyDashboard = lazy(() => import('./HeavyDashboard'));

The <Suspense> Boundary

export default function App() {
  const isAdmin = true;

  return (
    <div>
      <Navbar />
      {isAdmin && (
        <Suspense fallback={<div className="spinner">Loading Dashboard modules...</div>}>
          <HeavyDashboard />
        </Suspense>
      )}
    </div>
  );
}

Route-Based Code Splitting

The most effective place to use Code Splitting is at the route level. By lazy-loading your page components in React Router, you guarantee users only download the specific page they navigate to.

35. Code Splitting

Shrinking the Bundle Size

React.lazy() and Dynamic Imports

The <Suspense> Boundary

Route-Based Code Splitting

Knowledge Check

35. Code Splitting

Shrinking the Bundle Size

React.lazy() and Dynamic Imports

The <Suspense> Boundary

Route-Based Code Splitting

Knowledge Check