Lazy loading routes in Vue - Performance & Optimization

Performance: Lazy loading routes

HIGH IMPACT

This affects the initial page load speed by deferring loading of route components until needed.

Loading route components in a Vue app

Vue

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

Route components are loaded only when the user navigates to them, reducing initial bundle size and speeding up first paint.

📈 Performance GainReduces initial bundle size by 50-200KB; improves LCP by 200-500ms

Loading route components in a Vue app

Vue

import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

All route components are bundled and loaded upfront, increasing initial bundle size and slowing first paint.

📉 Performance CostBlocks rendering for extra 200-500ms depending on component size; increases initial bundle size by 50-200KB

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading routes	N/A (no extra DOM nodes)	0	Higher paint cost due to larger JS bundle delaying first paint	[X] Bad
Lazy loading routes	N/A (no extra DOM nodes)	0	Lower paint cost due to smaller initial JS bundle	[OK] Good

Rendering Pipeline

Lazy loading routes delays fetching and parsing route components until navigation triggers them, reducing initial JavaScript parsing and execution.

→Network

→JavaScript Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Parsing and Network load during initial page load

Core Web Vital Affected

LCP

This affects the initial page load speed by deferring loading of route components until needed.

Optimization Tips

1Use dynamic import() for route components to enable lazy loading.

2Lazy loading routes reduces initial JavaScript bundle size and speeds up LCP.

3Verify lazy loading by checking network requests load route chunks on demand.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading routes in a Vue app?

A Reduces number of DOM nodes created

B Reduces initial bundle size and speeds up first paint

C Improves CSS selector matching speed

D Preloads all routes to avoid network delay

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network panel, reload page and observe JS chunk sizes and load timing. Then navigate to lazy route and see new chunk load. Use Performance panel to check main thread blocking time.

What to look for: Smaller initial JS bundle size and deferred loading of route chunks on navigation confirm good lazy loading performance.