Why Lazy loading routes in Vue? - Purpose & Use Cases

The Big Idea

What if your app could feel instant without loading everything at once?

The Scenario

Imagine building a website with many pages. When users visit, the browser loads all page code at once, even if they only visit the homepage.

The Problem

This means slow startup times and wasted data because users download code they might never use. It also makes the app feel sluggish and heavy.

The Solution

Lazy loading routes means loading page code only when the user visits that page. This speeds up the initial load and saves data.

Before vs After

✗ Before

import Home from './Home.vue';
import About from './About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

✓ After

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

What It Enables

This lets your app start fast and only load what users need, making the experience smooth and efficient.

Real Life Example

Think of a shopping site where the homepage loads instantly, and product pages load only when you click them, saving time and data.

Key Takeaways

Loading all pages upfront slows your app and wastes data.

Lazy loading routes loads pages only when needed.

This improves speed and user experience dramatically.