Why Async components for lazy loading in Vue? - Purpose & Use Cases

The Big Idea

What if your app could open instantly by loading only what's needed, just in time?

The Scenario

Imagine building a big website where every page loads all its parts at once, even the ones you don't see right away.

This makes the page slow to open and wastes data, especially on slow internet.

The Problem

Loading everything upfront means users wait longer before they can interact.

It also uses more memory and can cause the browser to freeze while loading big chunks.

The Solution

Async components let Vue load parts only when needed, like opening a door only when you want to enter.

This speeds up the initial page load and saves data by loading code on demand.

Before vs After

✗ Before

import BigComponent from './BigComponent.vue';
export default { components: { BigComponent } }

✓ After

import { defineAsyncComponent } from 'vue';
export default { components: { BigComponent: defineAsyncComponent(() => import('./BigComponent.vue')) } }

What It Enables

You can build faster, smoother apps that load just what the user needs, exactly when they need it.

Real Life Example

Think of an online store where product details load only when you click a product, not when the homepage opens.

Key Takeaways

Loading all components at once slows down your app.

Async components load parts only when needed, improving speed.

This makes apps feel faster and saves user data.