All Patterns
/
⚡️ ⏐ Performance Patterns
/
5. Route-based Splitting

Route Based Splitting

Dynamically load components based on the current route


Overview

If your application has multiple pages, we can use dynamic imports to only load the resources that are needed for the current route. Instead of the code for all the possible pages in the initial bundle, we can bundle-split based on routes. This approach allows us to defer loading the bundle until the user actually navigates to that page.


Implementation

If you're using react-router for navigation, you can wrap the Switch component in a React.Suspense, and import the routes using React.lazy. This automatically enables route-based code splitting.

import React, { lazy, Suspense } from "react";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";

const App = lazy(() => import("./App"));
const About = lazy(() => import("./About"));
const Contact = lazy(() => import("./Contact"));

ReactDOM.render(
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/">
          <App />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
      </Switch>
    </Suspense>
  </Router>,
  document.getElementById("root")
);

Tradeoffs

Faster initial load: Dynamically importing the pages reduces the initial bundle size - allowing for a smaller initial load since the client doesn't have to download and execute as much, saving bandwidth.

Last updated on August 26, 2022