What are lazy loading components?

VueJunior~2 min read

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):

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.

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.