How do async components enable lazy loading?

Question

IT Interview Practice · Accepted Answer

**Async components** let you load a component's code **only when it's actually needed**, splitting it into a separate bundle (chunk) that's fetched on demand. This reduces the initial JavaScript the user downloads.

## Defining an async component

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

The dynamic `import()` tells the bundler (Vite/webpack) to split `HeavyChart.vue` into its own file, loaded lazily the first time the component is used — not as part of the main bundle.

## Why this matters for performance

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

Large, rarely-used components (rich-text editors, charts, modals, admin panels) don't need to be in the initial download. Lazy-loading them improves initial load time and Core Web Vitals.

## Handling loading and error states

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

This advanced form lets you show a spinner during the fetch and a fallback on failure — important since lazy loading introduces a (usually brief) network delay.

## Common pairing: route-level code splitting

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

Lazy-loading route components is the most common and impactful use — each page's code loads only when the user navigates to it.

## Why it matters

Async components are Vue's mechanism for **code splitting** — the key technique for keeping initial bundles small as an app grows.

By loading heavy or route-specific components on demand (with optional loading/error UI), you cut the JavaScript users download upfront, speeding up first load.

It's a standard, high-impact performance optimization, especially when applied to routes.

Defining an async component

Why this matters for performance

Handling loading and error states

Common pairing: route-level code splitting

Why it matters

Related questions