How to lazy load children config from a different library?

[ravi-kiran-ash]

Consider this following example where we are importing externalLibraryRoutes from a package.
Questions:

• Is there any way to lazily import or dynamic import the config externalLibraryRoutes and set the children array?

Why?
Because with the following approach, it is increasing bundle main.js in the App.

import { externalLibraryRoutes } from '@external/Routes'

const routeList = [
  {
    path: '/about',
    label: 'About',
    element: <About />,
  },
  {
    path: '/',
    label: 'Home',
    element: <Home />,
  },
  {
    path: '/homekits',
    label: 'Homekits',
    element: <PaddedContainer><Outlet/></PaddedContainer>,
    children: externalLibraryRoutes 
  },
];
const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <>
       <Link to="/">Home</Link>
       <Link to="/about">About</Link>
       <Outlet />
      </>
    ),
    children: routeList,
  },
]);

[brophdawg11]

In most cases, route.lazy will eliminate the vast majority of the bundle increase since all that's left in the critical bundle is a tree of paths.

If that's not enough for you then we just released a new API that lets you take that a step farther: https://reactrouter.com/en/main/routers/create-browser-router#optsunstable_patchroutesonmiss

You can read more about this in the blog post: https://remix.run/blog/fog-of-war