遅延読み込みによる React アプリのパフォーマンス

   npm install react-router-dom

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

   const Home = React.lazy(() => import('./pages/Home'));
   const About = React.lazy(() => import('./pages/About'));

   function App() {
     return (
       <Router>
         <Suspense fallback={<div>Loading...</div>}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
           </Routes>
         </Suspense>
       </Router>
     );
   }
   export default App;

   const preloadAbout = () => {
     import('./pages/About');
   };

   const About = React.lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));

   class ErrorBoundary extends React.Component {
     constructor(props) {
       super(props);
       this.state = { hasError: false };
     }

     static getDerivedStateFromError() {
       return { hasError: true };
     }

     render() {
       if (this.state.hasError) {
         return <div>Error loading component!</div>;
       }
       return this.props.children;
     }
   }

   // Usage
   <ErrorBoundary>
     <Suspense fallback={<div>Loading...</div>}>
       <MyComponent />
     </Suspense>
   </ErrorBoundary>