What can Route-based code splitting achieve in a single-page application?
import { lazy } from 'react';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const Contact = lazy(() => import('./routes/Contact'));
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
];
Route-based code splitting in SPAs achieves significant performance improvements by: 1) Loading route components only when they're needed, 2) Reducing the initial JavaScript bundle size, 3) Parallel loading of route chunks when navigating, 4) Better caching of individual route bundles. This approach is particularly effective because users typically don't need access to all routes immediately, and the application can load faster by deferring the loading of routes until they're actually requested. Modern frameworks like React Router make this pattern easy to implement while maintaining a good user experience.