At the moment, all the JavaScript for our app is loaded when the app first loads. This includes the Admin page that users don't use that often. It would be great if the AdminPage component wasn't loaded when the app loads and instead loaded on demand. This is exactly what we are going to do in this section. This is called "lazy loading" components. The following steps allows us to load things on demand:
- First, we are going to import the Suspense component from React, which we are going to use a little later:
import { Suspense } from "react";
- Now, we are going to import the AdminPage component differently:
const AdminPage = React.lazy(() => import("./AdminPage"));
We use a React function called lazy which takes in a function that returns a dynamic import, which in turn is assigned to our AdminPage component variable...