Skip to main content

What is lazy loading of routes?

VueJunior~1 min read
Suggest an edit

Lazy loading of routes is a technique where route components are loaded not right when the application starts, but only when the user first navigates to the corresponding route.

In other words:

Lazy loading is "lazy" loading of pages. The component loads only at the moment you navigate to it.

This significantly shrinks the bundle size on first page load and speeds up the SPA's startup.

A short lazy loading route example

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

Here:

  • () => import() is a dynamic import
  • Webpack/Vite automatically create a separate chunk file
  • the file loads only when the user opens /about

Why is lazy loading needed?

  1. It reduces the initial bundle size (especially if the application has more than 20 pages)
  2. It speeds up the application's load time The user sees the first screen faster (LCP).
  3. SSR and SEO optimization Routes load when they're actually needed.
  4. It works out of the box in Vue Router No complex setup required.

How does it work under the hood?

  • import() returns a Promise.
  • Vue Router waits for the file to load.
  • When loading finishes, it renders the component.

A separate chunk appears in the bundle, for example:

about.[hash].js

Example with a chunk name (Webpack)

js
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

Lazy loading and nested routes

It works exactly the same way:

js
{ path: '/users/:id', component: () => import('@/pages/User.vue'), children: [ { path: 'posts', component: () => import('@/pages/UserPosts.vue') } ] }

Lazy loading + groups of routes

You can split the application into logical modules, for example:

/admin → loads only when needed /account → also lazy /dashboard → also lazy

Short Answer

Interview ready
Premium

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

Suggest an edit