React dynamic imports with React Router for better performance

What is dynamic imports?

Dynamic Imports provides you the way that able to import dynamically at runtime.

Reducing network payloads using dynamic imports

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import About from './components/About';
import Home from './components/Home';
import Main from './components/Main';
import Navbar from './components/Navbar';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/main" element={<Main />} />
        <Route path="/about" element={<About />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

I set up the project with CRA. There is a router and three pages.

When I build it, all of the files App, About, Home, Main, Navbar must be bundled in one file.

Regardless of what page you're into, you would download the bundle file that has all of pages when you first enter a website.

It must become one of the reasons that makes your app is slow down.

At this point, we can reduce network traffic by using dynamic imports.

The bundle size is 350kb. Although it's already pretty small, it would be large in a real world.

Let's think about it. If a bundle size is mega bytes, undoubtedly, it would be issues to users who access with mobile or a lack of internet speed.

I will use dynamic imports, React.lazy, React.Suspense.

• The React.lazy function lets you render a dynamic import as a regular component. docs

• React.Suspense lets your components "wait" for something before they can render.

If it imports modules at runtime, js files of the pages will be downloaded at runtime. It means users have to wait until the download is done. You can render a loading screen with React.Suspense.

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

import Navbar from './components/Navbar';
const About = lazy(() => import('./components/About'));
const Home = lazy(() => import('./components/Home'));
const Main = lazy(() => import('./components/Main'));

function App() {
  return (
    <Router>
      <Navbar />
      <Suspense fallback={<>loading...</>}>
        <Routes>
          <Route path="/main" element={<Main />} />
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

Now, the bundle size has decreased.

At a point that I enter a page, a script file of the page starts to download.

Conclusion

There are numerous ways that to use dynamic imports for the performance. I just covered a bit of the usages. I thought this may be one of practical adoption in any React projects. I hope it'll be helpful.
If you have your favorite ways that you use for the performance. Let me know in comments below.

Thank you, happy coding :)