使用useRoutes时如何实现基于路由的代码拆分

Question

Am trying to find a way of implementing route-based code-splitting, I tried lazy loading the components and wrap the component in suspense. Still, it resulted in only several components being successfully split from the main bundle and bu not all.

function AppRoutes() {
      const routes = useRoutes(
        [
          {path:'/',
           element:(<Suspense fallback={<Loading size={45} />}><Login/></Suspense>)},
          {path:'signup',
           element:(<Suspense fallback={<Loading size={45} />}><Signup/></Suspense>)},
          {path="about", 
           element:(<Suspense fallback={<Loading size={45} />}><About/></Suspense>) }
          {path="contact", 
           element:(<Suspense fallback={<Loading size={45} />}><Contact /></Suspense>)}
          {path="customers", 
           element:(<Suspense fallback={<Loading size={45} />}><Customers /></Suspense>)}
          {path="loans", 
           element:(<Suspense fallback={<Loading size={45} />}><Loans /></Suspense>}
          {path="stats", 
           element:(<Suspense fallback={<Loading size={45} />}><Statistics /></Suspense>}
          {path="dashboard", 
           element:(<Suspense fallback={<Loading size={45} />}><Dashboard/></Suspense> }
        ]
      )
      return routes;
    }

Answer 1

Use lazy loading for the components. It should not be nothing special

const Login = lazy(() => import('./Login').then(component => component))

That will split the file where you are calling useRoute into small chunks