Lazy loading routes is a great way to improve performance by splitting your code into smaller chunks that load only when needed.

Step 1: Define Lazy Loaded Routes

Update your router configuration:

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue'),
  },
  {
    path: '/contact',
    component: () => import('./views/Contact.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Step 2: Configure Webpack (Optional)

Webpack handles dynamic imports automatically, but you can fine-tune its behavior in vue.config.js.

Step 3: Test Your Setup

Navigate through your app and monitor network requests to ensure routes are loading as expected.