Defining routes in Vue - Performance & Optimization

Performance: Defining routes

MEDIUM IMPACT

This affects the initial page load speed and navigation responsiveness by controlling how components are loaded and rendered.

Setting up routes in a Vue app

Vue

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

Components are lazy-loaded only when the route is visited, reducing initial load size.

📈 Performance GainSaves 50-100kb on initial load, improves LCP by loading only needed code

Setting up routes 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 imported upfront, increasing the initial bundle size and delaying page load.

📉 Performance CostAdds 50-100kb to initial bundle, blocks rendering until all components load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager route imports	Low	Low	High (due to large JS bundle)	[X] Bad
Lazy-loaded routes	Low	Low	Low (smaller JS bundle)	[OK] Good

Rendering Pipeline

When routes are defined with lazy loading, the browser fetches only the code needed for the current route, reducing style calculation and layout work upfront.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and JavaScript parsing during initial load

Core Web Vital Affected

LCP

This affects the initial page load speed and navigation responsiveness by controlling how components are loaded and rendered.

Optimization Tips

1Always use dynamic imports for route components to enable lazy loading.

2Avoid importing all routes upfront to keep initial bundle size small.

3Check network requests to ensure route chunks load only when needed.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy-loading route components in Vue?

A Improves CSS selector matching speed

B Reduces initial bundle size and speeds up page load

C Prevents layout shifts during navigation

D Increases DOM nodes for better SEO

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe JS files loaded initially versus on navigation.

What to look for: Smaller initial JS bundle size and additional JS chunks loading only when navigating to routes