Suggest an edit

Improve this article

Refine the answer for “What are lazy loading components?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Lazy loading components** is a technique where components **are not loaded right when the application loads, but only when they are actually needed**.

In simpler terms:

> **Lazy loading = loading components "lazily", on demand.**
> This reduces the size of the initial bundle and speeds up the application's load time.

---

## Why do you need lazy loading for components?

In a typical SPA:

- all the application's code ends up in **one big bundle**
- loading takes longer
- this is especially bad on mobile networks

Lazy loading solves the problem:

- large or rarely used components are loaded only when needed
- the application loads faster
- the user gets the UI faster
- TTI (Time To Interactive) goes down

---

## A real-life example

You have:

- an "Admin" page (admin)
- a "Statistics" page
- a "Settings" page

The user only visits the home page →
there is no need to immediately load all the code for the admin panel and statistics.

---

## Lazy loading in Vue 3 (dynamic import)

Vue lets you load a component lazily using the `defineAsyncComponent` function, or simply a dynamic import.

#### The simplest option:

```vue
<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPanel = defineAsyncComponent(() =>
  import('./components/AdminPanel.vue')
)
</script>

<template>
  <AdminPanel />
</template>
```

The `AdminPanel.vue` component is loaded **only when it needs to be rendered for the first time**.

---

## A simpler way (often used):

```js
const AdminPanel = () => import('./components/AdminPanel.vue')
```

Vue understands on its own that this is an async component.

---

## Lazy loading components in routes (Vue Router)

This is the most common approach.

```js
const routes = [
  {
    path: '/admin',
    component: () => import('@/views/AdminView.vue')
  }
]
```

The "Admin" page is loaded only once the user navigates to it.

---

## Advantages of lazy loading

#### Smaller initial bundle size

The main page loads faster.

#### Faster TTI (Time To Interactive)

Less JS → the browser becomes interactive faster.

#### Network optimization

The user only downloads what is actually needed.

#### Better UX

The application opens instantly.

---

## Downsides of lazy loading (asked at the middle level)

- the first load of a lazy component can be a bit slower (the code has to be downloaded)
- you need to show a "loader" (a loading state)
- it is harder to analyze bundles if there are too many lazy chunks

---

## Summary (perfect for an interview)

> **Lazy loading components means loading components on demand.**
> **Vue loads such components only at the moment they are first used, usually through dynamic imports.**
> **This reduces the size of the initial bundle and speeds up the application's load time.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts453 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.