What is lazy loading / code splitting for routes, and how do you implement it?

Lazy loading routes splits your app's JavaScript bundle so route components are only downloaded when the user navigates to them, reducing initial load time. In Vue Router, this is done using dynamic import():

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

Build tools like Vite/webpack automatically split each dynamically imported module into its own chunk, loaded on demand.