Code Splitting for React

Prerequisite

• Familiarity with React Router

• Proficiency in using DevTools, preferably in Chrome.

• Installation of the latest version of Node is required.

• Understanding of React Suspense concept.

Introduction

When leveraging React to create your high-quality application, the anticipation is for enhanced speed compared to traditional JavaScript development. However, if your React app encounters sluggish performance, a straightforward and library-light approach to address this is through code splitting.

This article delves into the concept of code splitting, elucidating what it entails and guiding you on its implementation to optimize the efficiency of your applications. Explore the benefits of code splitting and learn how to seamlessly integrate it into your React projects for improved performance.

Goals

This article aims to:

• Describe the process of code splitting.

• Provide a clear understanding of what code splitting is in the context of React applications.

• Offer practical insights into implementing code splitting in React applications.

• Highlight the advantages and benefits of incorporating code splitting into React applications.

Understanding Code Splitting

In the realm of software development, a cardinal objective is to craft applications that are not only well-optimized but also efficient and high-performing. Despite its relatively low profile in developer discussions, code splitting has garnered increased attention, particularly with the surge of web applications and the imperative to enhance user experiences.

At its core, code splitting entails the dissection of a software application into modularized components, leading to tangible benefits such as improved performance and expedited load times.

In a more succinct definition, code splitting is a technique that strategically dissects an application's codebase into smaller, more manageable parts. The primary goal is to load only the code essential for the current user's interaction, thereby mitigating the initial load time of the application.

In today's digital landscape, where users demand swift and responsive interfaces, understanding and implementing code splitting is imperative. Failing to do so could result in the loss of customers and, consequently, a negative impact on business.

When developers build applications, a common practice involves bundling all JavaScript code into sizable files. While this method offers simplicity and facilitates easy deployment, it can lead to substantial file sizes that, in turn, hinder the initial page load and overall web app interactivity.

Implenting Code Splitting

Code splitting can be implemented in various development environments and technologies.

Here are some common methods:

• Webpack: If you're using Webpack as your build tool, you can easily implement code splitting using its dynamic import feature. Webpack will automatically split your code into smaller chunks and load them on-demand when needed.

• React: React, a popular JavaScript library for building user interfaces, provides a built-in mechanism for code splitting using the React.lazy() and Suspense APIs. These allow you to load components asynchronously as users navigate your application, and will be our focus for today's article.

• Vue.js: Vue.js, another popular JavaScript framework, supports code splitting through dynamic imports, which lets you load components on-demand, improving the performance of your Vue applications.

• Server-Side Rendering (SSR): In server-side rendered applications, you can implement code splitting by dynamically importing modules to reduce the initial server response size and improve the time-to-interactive metric.

Benefits of Code Splitting

Some worthwhile benefits of code splitting includes:

• Faster Initial Loading Time: Code splitting enables the loading of of only the essential code required for the initial page view, with this, users don't have to wait for the application to become fully usable.

• Improved User Experience: Faster load times contribute to a better user experience, which leads to better satisfaction and engagement.

• Lower Bandwith Consumption: Smaller code chunks mean the amount of data transferred over the network is lesser.This reduces bandwidth and potentially saves costs for both users and developers.

• Efficient caching: Code splitting can improve browser caching as the only the changed or updated code chunks need to be loaded,reducing the need to download the entire application code each time.

• Better Maintainability: Breaking the application into more modular parts can make the codebase more manageable and easier to maintain, test and debug.

To illustrate the concept of code splitting in React today, we'll build a demo web app featuring simple toggle and alert functions. This demo will unfold in three major stages. Firstly, we'll set up our React environment using ViteJS and code up the web app.

Afterward, we'll inspect the web app using a browser developer tool—preferably Chrome—to identify any inefficiencies. This critical analysis will help us understand the initial performance bottlenecks.

Following the inspection, we'll make significant changes to different components of the web app to implement code splitting. By optimizing the loading of components on-demand, we aim to observe tangible improvements in the app's overall efficiency.

Part 1: Building the Initial Codebase

Since this is a very practical topic, I felt it would be best to orient this article to actually make a litle demo project that mirrors a standard react codebase and then dissect the project while using codesplitting to make the project better in terms of efficiency.

Setting up

Let's set up the ViteJS environment.

1. Before we begin, ensure that you have the latest version of Node installed on your computer. As of the time of writing this article, the latest version is 21.1.0. Verify your Node installation by running the following command in your terminal:

node --version

2. Following the Node installation, let's set up the React working environment. Execute the following command in your terminal to install Vite globally:

npm install -g create-vite

3. Switch to the directory where you intend to create the web app. Use the following command to navigate to your desired directory:

cd project-location

• Replace project-location with the location you want to make the app.

4. Once you're inside the desired location, run the following command to create the Vite-React project:

npm create vite@latest

5. You'll be prompted to provide information about your project. Feel free to name it as you wish; for instance, I'll name mine split-app. Enter the relevant details when prompted.

6. When prompted about the framework, choose "react," and then select the "JavaScript" option. This ensures the project is set up with React using JavaScript.

NOTE: If you encounter challenges while selecting options using Git Bash, it's recommended to use an Integrated Development Environment (IDE) terminal such as VSCode for a smoother experience.

7. Execute all the commands displayed to install the necessary dependencies. This ensures that your project has all the required packages and dependencies installed.

cd split-app
npm install
npm run dev

• Running the command npm run dev will initiate a visual output on a specific port, confirming that the Vite-React environment is ready for use. This visual output typically indicates that your development server is up and running.

8. Double click on the port.

Here's the result

Making the Web App.

Now, let's start building the app. At this point, the essential packages should be installed.

1. An important package we'll utilize is React Router, facilitating the behavior of our webpage as a Single Page Application (SPA). To install this package, use the following terminal command:

npm install react-router-dom@6

2. Another crucial package will be required later for error handling. Use this command to install:

npm i react-error-boundary

3. Once the packages are installed, delete the default files in the /src folder of your app and ensure it has the following file and folder arrangement:

/src 
  /components
    Admin.jsx
    AdminHello.jsx
    ErrorFallback.jsx
    Header.jsx
    Home.jsx
    Layout.jsx
  App.jsx
  index.css
  main.jsx

These components will do these things:

• Admin.jsx: The main component for the admin section.

• AdminHello.jsx: A component for greeting.

• Header.jsx: A component for the header section.

• ErrorFallback.jsx: Displays error messages.

• App.jsx: The combined component for your React application.

• index.jsx: Contains global styles for the entire application.

• main.jsx: The main entry point where the React application is initialized and rendered into the HTML root element.

Next, let's populate all the files with code. To keep the article succinct, I won't explain every line of code but will provide a generalized idea of what each file's code will accomplish.

4. Now, let's create the main components, starting with /components/Admin.jsx.

import AdminHello from "./AdminHello";

const Admin = () => {
  return (
    <main className="admin">
      <AdminHello />

      <h2>Author</h2>
      <p>
        Debitis culpa iste perspiciatis quos odit consequatur dicta nobis?
        Veritatis temporibus facere, quibusdam obcaecati molestiae possimus
        repellendus ratione? Rerum harum esse eius doloribus distinctio a neque
        sed dolore saepe voluptatem odit eligendi debitis quas molestiae ullam
        assumenda, fuga exercitationem quasi repudiandae excepturi. Ipsum, ex
        commodi. Odio minus adipisci voluptas assumenda possimus a magni
        necessitatibus libero. Quis alias dolorum dolor odio doloremque qui
        adipisci molestias eveniet eaque, consequuntur voluptatem numquam,
        aperiam beatae tenetur exercitationem cupiditate, necessitatibus nobis
        ea tempora ex. Tempore, nobis ut rem accusamus deleniti aperiam, vero
        dignissimos at, unde error sapiente eaque. At enim laudantium autem unde
        mollitia blanditiis?
      </p>
      <p>
        Reiciendis totam, repellendus maiores suscipit, iure unde in praesentium
        voluptatem nobis enim provident illum cumque at molestias, ratione animi
        qui possimus deserunt. Harum repudiandae excepturi beatae explicabo eius
        quis nemo eum sapiente temporibus a non debitis velit, optio distinctio
        consequuntur repellat cumque, ab possimus voluptate saepe perspiciatis
        quam. Quam aliquam, quaerat esse porro, tenetur, dolorem provident
        distinctio vero nostrum ab obcaecati? Amet voluptate animi tenetur
        praesentium ullam saepe iste a. Explicabo, distinctio temporibus!
        Laudantium quod reprehenderit dignissimos voluptates animi repudiandae,
        ad perferendis dolore a, rem voluptate repellat quasi assumenda magnam
        eaque. Sit dignissimos libero atque officiis doloribus deserunt. Eos,
        architecto!
      </p>
      <p>
        Tenetur, sed sequi officiis at dolor, suscipit similique esse molestiae
        ea animi consectetur aliquid facere itaque provident quasi. Adipisci
        ipsum eos odio harum necessitatibus quas corporis reprehenderit
        perspiciatis unde natus labore architecto libero saepe eaque, vero
        itaque distinctio exercitationem. Tempora qui sequi maxime dolorum
        perferendis neque minus quaerat molestias eius, libero incidunt pariatur
        similique officia ea? Eius sunt tenetur consequatur vitae, earum maxime
        assumenda dicta vero. Neque doloremque dignissimos saepe, deserunt
        officiis nam labore non rem vero, animi dolores quae magnam.
        Reprehenderit provident molestias eaque, suscipit sapiente dolores nemo
        excepturi iste nobis fugiat distinctio iure! Eius ad hic perferendis
        explicabo?
      </p>
      <p>
        Hic harum sed deleniti, necessitatibus eius soluta odio neque totam
        tempore, facilis quisquam molestiae optio iste quos suscipit
        reprehenderit. Assumenda molestiae, distinctio adipisci sapiente ipsa
        similique natus architecto quod quam inventore? Adipisci expedita,
        delectus quam corporis dolorum nesciunt quia illo temporibus sed alias
        accusamus dolore, debitis quidem incidunt, aliquam quod eveniet optio
        perferendis natus saepe tempora! Asperiores libero mollitia aperiam quo
        impedit possimus fugit vero? Provident eaque sapiente quis consequatur
        harum, dolores exercitationem labore quidem reiciendis quisquam
        reprehenderit accusamus ut saepe eum consequuntur eius. Corrupti, odio
        asperiores quaerat aliquam provident nesciunt quia delectus quibusdam
        eveniet accusantium, officiis vel nobis illo.
      </p>
      <p>
        Impedit vitae temporibus non suscipit quibusdam dolor eum amet sunt,
        placeat laborum. Quis unde id ex dolor, exercitationem quae recusandae
        consequatur repellat rem eaque sint fuga ea laudantium aperiam amet
        labore sit magnam, quibusdam aliquam nisi. Earum, tempora magni dicta
        veniam, accusamus tempore quisquam esse delectus suscipit laboriosam
        labore exercitationem animi perferendis reiciendis, sapiente nemo
        deserunt eveniet ad! Illo debitis quasi voluptates dicta. Fugiat
        accusantium veritatis veniam ea praesentium quam quas sit. Animi
        consequuntur itaque, delectus enim ipsum illum dolore tempora voluptates
        voluptas. Expedita consequatur impedit architecto, quo perspiciatis
        culpa nostrum nesciunt officiis sint. Ex dolore facere animi enim
        possimus?
      </p>
      <p>
        Atque, omnis. Perspiciatis repudiandae est, aut molestias neque deleniti
        assumenda necessitatibus alias ea. Illo quidem fuga libero expedita,
        vitae harum reprehenderit rem cumque deleniti commodi, excepturi ducimus
        possimus eveniet ipsa. Aliquam, ullam vitae voluptatum at reiciendis
        harum rerum atque, esse earum repellendus debitis beatae, necessitatibus
        provident in eius ipsam. Provident, numquam porro. Doloribus ut fugiat
        repellendus possimus dignissimos suscipit tempore odio qui asperiores.
        Odio delectus recusandae dicta maxime atque laudantium, architecto porro
        beatae officia sit nulla fuga maiores saepe? Alias, corrupti minima id
        assumenda optio magni quidem? Qui beatae ad nam, quod excepturi
        recusandae commodi saepe deserunt perferendis accusantium magnam?
      </p>
      <p>
        Perspiciatis dolorum voluptates at quidem delectus modi incidunt,
        adipisci cupiditate quas? Sit inventore consectetur accusamus nihil ab
        cum autem, similique repudiandae ullam? Atque suscipit vel facere nemo
        vitae culpa magnam omnis. Iure quos officia error recusandae dolorum
        mollitia debitis magnam? Asperiores ipsa odio accusantium dolores esse
        eaque sed explicabo laudantium reiciendis dignissimos quaerat iusto
        consectetur quod animi, est omnis, molestiae ipsam molestias sequi
        provident cupiditate eligendi voluptatum corrupti perspiciatis.
        Accusamus voluptas quia cupiditate. Fugiat libero reprehenderit
        inventore fuga nisi odit suscipit voluptas, doloribus dolores distinctio
        quae aut repellat voluptatibus quam obcaecati quidem cupiditate eaque
        ex, optio rerum ducimus. Doloribus, eum.
      </p>
      <p>
        Velit natus dolores distinctio dolorum, dicta voluptate. Officia
        consequatur fugit, unde explicabo recusandae tenetur necessitatibus
        error in repellendus, quo optio accusamus dignissimos quae deserunt sunt
        laudantium, dolore ipsa numquam eius ducimus. Repellendus a quod
        voluptatem quae aperiam molestias, dolorum ut ea id culpa praesentium,
        veritatis non et corporis eum, recusandae minima voluptas! Ad eveniet
        nihil esse maxime libero est, sed ipsam at. Totam distinctio voluptatem
        impedit et culpa, necessitatibus rem voluptate numquam beatae mollitia
        qui eligendi placeat explicabo excepturi architecto nisi unde
        praesentium autem obcaecati. Corporis, neque praesentium! Odio ipsam,
        fugiat dolor enim libero alias? Maxime quas quia possimus corrupti.
      </p>
      <p>
        Nam non eos reiciendis aut doloremque velit ipsam repellendus aperiam
        architecto unde sint nihil reprehenderit, eaque incidunt, sed magnam
        eligendi quas rerum, tempore illo et nobis. Fugiat sint magnam
        exercitationem, eum esse voluptas, neque fuga aliquid culpa dicta in
        amet! Doloribus, consequatur voluptates explicabo excepturi veritatis
        sit cumque. Blanditiis et officia impedit? Adipisci quo ipsum dolores
        qui rerum voluptatem laudantium voluptate odio ea corporis fugit rem
        porro in possimus commodi, necessitatibus itaque mollitia obcaecati non
        debitis, expedita tempora quisquam perspiciatis excepturi. Animi neque
        totam molestias repellat illum consequatur rem, optio harum eaque ipsam,
        consequuntur, ipsum cumque delectus amet magnam excepturi?
      </p>
      <p>
        Eveniet iusto dolores dolore neque, sit ex voluptate consequuntur
        dignissimos repellat, modi quam. Nihil, sequi dolorem tenetur veritatis
        laboriosam debitis voluptate, distinctio facere ad aspernatur
        necessitatibus ea veniam autem at accusamus, deleniti labore! Sed
        repellendus, soluta aspernatur voluptates harum ducimus suscipit debitis
        natus earum molestias inventore ad aliquid doloremque unde quod quam.
        Repudiandae aut, aliquam natus pariatur, qui officiis quasi unde, vero
        fuga blanditiis tempora ratione eos at itaque atque quae maxime rerum
        porro? Ipsam vel laboriosam praesentium dignissimos saepe aliquam harum
        nesciunt aut doloribus fugiat. Rem veniam molestias dicta nisi adipisci
        doloremque, sed sapiente at sunt voluptatibus vero omnis.
      </p>
      <p>
        Voluptate quis repellendus deserunt rerum necessitatibus porro sint
        ipsum vero, mollitia facere, quas nostrum vitae animi velit, blanditiis
        veritatis ullam eaque. Corrupti quia saepe, excepturi, nemo atque
        necessitatibus magni asperiores blanditiis pariatur incidunt dolores
        alias similique provident repudiandae dolorum rerum maiores ratione
        soluta dolorem voluptates, ipsum doloremque deserunt reiciendis sed?
        Atque, illum dolor ex harum nihil id illo aspernatur ea, quae, magnam
        animi consectetur qui! Quibusdam necessitatibus suscipit, consequuntur
        ipsa quam itaque excepturi quasi, voluptate placeat deserunt laboriosam
        omnis odio odit et! Quae optio similique consectetur modi aliquam,
        quisquam reprehenderit, omnis ipsum harum dolorum inventore laudantium
        fugiat nostrum odio eveniet!
      </p>
      <p>
        Quod dolor repellendus quis suscipit doloremque beatae laboriosam! Nulla
        eum fuga laudantium a omnis doloribus sapiente, eius temporibus ullam
        porro, minus alias error quae. Ullam aperiam adipisci culpa harum,
        eligendi iste accusantium sit. Id magnam placeat a non beatae nobis
        architecto. Aut incidunt voluptas consequatur facilis rem illo
        temporibus architecto perspiciatis nisi ex repellat, nemo aspernatur cum
        laudantium dolorum nostrum recusandae? Expedita temporibus facilis dicta
        aspernatur quas sit soluta sint animi. Optio, perferendis numquam!
        Facere ab placeat sed vitae ullam saepe id cupiditate beatae eos natus
        voluptates non incidunt aut, dicta nulla eveniet a minima sit aperiam
        quasi? Eaque, natus?
      </p>
    </main>
  );
};
export default Admin;

5. Next, let's work on /components/AdminHello.jsx.

const AdminHello = () => {
  return <h3>Hello, Welcome to Open Replay</h3>;
};
export default AdminHello;

• This renders another page component.

6. Up next/components/ErrorFallback.jsx.

const ErrorFallback = ({ error, resetErrorBoundary }) => {
  return (
    <div className="error">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
};
export default ErrorFallback;

• This is the error fall back messsage.

7. Next up, /components/Header.jsx.

const Header = () => {
  return (
    <header>
      <h1>Open Replay Blog</h1>
    </header>
  );
};
export default Header;

• This is the header component.

8. For the home page component, /components/Home.jsx.

import { Link } from "react-router-dom";

const Home = () => {
  return (
    <main className="home">
      <h2>Open Replay</h2>
      <p>
        <Link to="/admin">Read more on Open Replay</Link>
      </p>
      <p>
        <b>Chief Editor :</b> Federico Kereki
      </p>
    </main>
  );
};
export default Home;

9. Certainly, let's add code to /components/Layout.jsx to ensure a proper layout.

import { Outlet } from "react-router-dom";
import Header from "./Header";

const Layout = () => {
  return (
    <div className="App">
      <Header />
      <Outlet />
    </div>
  );
};
export default Layout;

10. Moving on to the main application files, let's start with/src/App.jsx.

import { Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Layout from "./components/Layout";
import Admin from "./components/Admin";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />

        <Route path="admin" element={<Admin />} />
      </Route>
    </Routes>
  );
}

export default App;

• This defines routes for the application.

11. /src/index.css provides overall styling.

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ADMIN-BG: #fdf7e4;
  --HOME-BG: #faeed1;
  --HEADER-COLOR: #ded0b6;
  --HEADER-BG: #bbab8c;
}

body {
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
}

#root,
main {
  min-height: 100vh;
}

main {
  display: grid;
  place-content: center;
  padding: 1rem;
}

header {
  background-color: var(--HEADER-BG);
  color: var(--HEADER-COLOR);
  position: sticky;
  top: 0;
  padding: 1rem;
  z-index: 1;
}

.home {
  background-color: var(--HOME-BG);
  text-align: center;
}

.admin {
  background-color: var(--ADMIN-BG);
}

.admin p {
  margin-bottom: 1rem;
}

12. /src/main.jsx gets loaded into the HTML document.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/*" element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
);

• This contains the main react-router code.

13. After making all these changes, run the following command in your terminal and click on the local host link provided.

npm run dev

• This concludes the process, resulting in a simple homepage and a link that, when clicked, expands to reveal more content.

Part 2: Identifying Bottlenecks

In my perspective, a pragmatic software engineer doesn't categorize software as strictly right or wrong but rather on a spectrum of efficiency. While there's nothing inherently flawed with the demo as it functions perfectly, its efficiency might be optimized further.

The crux of our discussion in this article is that if the client doesn't require the full code at a specific time, it's not best practice to provide everything at once. It's crucial to deliver only the necessary code to the client at a given point, emphasizing the importance of code splitting for enhanced efficiency and a more streamlined application.

We want to address an issue with the split-app, our example React app. Currently, upon loading, all components, including /components/Admin.jsx and /components/AdminHello.jsx, are being loaded. However, these components are intended to be loaded only when an admin is using the app, not on the initial load.

Our objective with code splitting is to prevent the loading of the admin components until the "read more" link is clicked. To visualize these inefficiencies, let's turn to DevTools:

1. Open chrome developer tools by either right-clicking on the demo and choosing "inspect" or option or pressing Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

2. Click on the "Sources" option, and right-click for a moment on the refresh option. Then, select "Empty Cache and Hard Reload." This ensures a fresh start, clearing any cached data that might affect the loading behavior of the application.

3. After refreshing the page, navigate to the src folder and then to the components folder. Observe the files, and you'll notice that both Admin.jsx and AdminHello.jsx are present. As you are aware, these files should only be loaded on demand, highlighting the current inefficiency we aim to address with code splitting.

Part 3: Code Splitting with Lazy Loading

Now, let's optimize our application. Keep in mind that the objective of this demo is to ensure that the files /src/components/Admin.jsx and /src/components/AdminHello.jsx are loaded only when the "read more" link is clicked. This is the essence of code splitting—to load specific components on-demand for a more efficient application. Turn over to /src/App.jsx because that is the file where we would be splitting the application. And make changes to the file like this:

import { Routes, Route, useNavigate } from "react-router-dom";
import Home from "./components/Home";
import Layout from "./components/Layout";
// import Admin from "./components/Admin"
import { ErrorBoundary } from "react-error-boundary";
import ErrorFallback from "./components/ErrorFallback";
import { lazy, Suspense } from "react";

const Admin = lazy(() => import("./components/Admin"));

function App() {
  const navigate = useNavigate();

  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />

        <Route
          path="admin"
          element={
            <ErrorBoundary
              FallbackComponent={ErrorFallback}
              onReset={() => navigate("/")}
            >
              <Suspense fallback>
                <Admin />
              </Suspense>
            </ErrorBoundary>
          }
        />
      </Route>
    </Routes>
  );
}

export default App;

In the previous version of this file, <Route path="admin" element={<Admin />}/> is responsible for handling and granting access to the admin page.

To ensure that the admin pages are loaded in the browser only when the admin link is clicked, here are the changes made in src/App.jsx:

• import { Routes, Route, useNavigate } from "react-router-dom": This line imports specific components and functions from the react-router-dom library for setting up routing in the application.

• The newly added import statements import { ErrorBoundary } from "react-error-boundary" and import ErrorFallback from "./components/ErrorFallback" are part of React's system for catching errors anywhere in the component tree and logging those errors.

• Meanwhile, import { lazy, Suspense } from "react" are modules used for lazy loading and code splitting. Lazy loading defers the loading of certain assets until they are needed.

• This line const Admin = lazy(() => import('./components/Admin')) uses the lazy module from React to lazy load the Admin component.

• This component <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => navigate('/')}> is the standard way of using the ErrorBoundary and ErrorFallback modules to handle errors. The navigate function redirects to the home page in case of errors.

• <Suspense fallback> uses the Suspense module from React to enable lazy loading. The fallback prop is required and represents the UI to show while the main UI components are being lazy loaded. However, since it isn't in the scope of this article, I chose to not create a proper fallback UI.

To confirm if our changes worked:

1. Exit your current thread on your terminal using CTRL+C. Save your changes.

2. Restart the server with this command, and click on the port:

npm run dev

3. Open developer tools, go to the "Sources" option, and refresh with the "Empty Cache and Hard Reload" option.

4. Toggle the src folder in DevTools, and observe that the admin files /components/Admin.jsx and /components/AdminHello.jsx are absent. This behavior occurs due to lazy loading.

5. Now, if you click the link on the homepage, /components/Admin.jsx and /components/AdminHello.jsx will be loaded in the browser.

Imagine if this were a React codebase with millions of lines of code. Consider the time it would take to load all that code at once to the client and the impact on user experience.

This my friend, is the magic of code splitting. With code splitting, you can selectively deliver code to users based on their interaction with your web application, optimizing performance and providing a more responsive user experience.

Conclusion

This article has unraveled a powerful technique for enhancing the efficiency of React applications.

We embarked on a comprehensive exploration, aiming to provide a clear understanding of what code splitting entails in the context of React development.

The goals included describing the process of code splitting, highlighting its advantages,and offering practical insights into its implementation.

By breaking down the complexities of code splitting, we've illustrated its potential to transform React applications, especially in scenarios where loading large volumes of code upfront could hinder user experience.

The practical demo, focusing on a web app example, allowed us to witness firsthand how code splitting can be a game-changer. Through strategic implementation, we ensured that components are loaded only when necessary, optimizing performance.

Code splitting isn't just a technique; it's a solution to the challenge of delivering large-scale applications without sacrificing speed. As we conclude this exploration, consider incorporating code splitting into your React projects, unlocking the magic of efficient and responsive user experiences.

Resources

• Vite documentation

• Completed Demo