How to lazy load components in your React App

App.js

//importing lazy and suspense from react library
import React,{lazy, Suspense} from 'react';

//lazy loading the requied components
const Home = React.lazy(() => import('./modules/pages/Home'));
const Profile = React.lazy(() => import('./modules/pages/Profile'));
const About = React.lazy(() => import('./modules/pages/About'));

//wrapping your switch compoent (inside react-router) with <Suspense>
<Router>
    <main>
        <Suspense> //*NEW*
            <Switch>
                <Route path="/" exact>
                    <Home />
                </Route>
                <Route path="/profile" exact>
                    <Profile />
                </Route>
                <Route path="/about">
                    <About />
                </Route>
            </Switch>
        </Suspense> //*NEW*
    </main>
</Router>