Teaches route-based code splitting for single-page applications. Use when different routes load distinct feature sets and you want to avoid loading all route code upfront.
We can request resources that are only needed for specific routes, by adding route-based splitting. By combining React Suspense or loadable-components with libraries such as react-router, we can dynamically load components based on the current route.
By lazily loading the components per route, we're only requesting the bundle that contains the code that's necessary for the current route. Since most people are used to the fact that there may be some loading time during a redirect, it's the perfect place to lazily load components!
loadable-components with routing libraries like react-routerBy lazily loading the components per route, only the bundle containing code necessary for the current route is requested. Since users expect some loading time during navigation, route transitions are a natural place to introduce code splitting without degrading the experience.
Most modern frameworks (Next.js, Remix, React Router) support route-based splitting out of the box. In a custom setup, use React.lazy() with Suspense to wrap route-level components, or configure your bundler's entry points per route.