Pages and file-based routing in Vue - Performance & Optimization

Performance: Pages and file-based routing

MEDIUM IMPACT

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

Defining routes for pages in a Vue app

Vue

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

Components are lazy-loaded on demand, reducing initial bundle size and speeding up first paint.

📈 Performance GainSaves 100-200ms on initial load; improves LCP and INP by loading only needed code.

Defining routes for pages in a Vue app

Vue

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

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

All page components are imported upfront, increasing initial bundle size and delaying first content paint.

📉 Performance CostBlocks rendering for extra 100-200ms depending on component size; increases LCP time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager import of all pages	Low (few nodes initially)	1 reflow on load	High paint cost due to large bundle	[X] Bad
Lazy load pages with file-based routing	Low (few nodes initially)	1 reflow on load	Lower paint cost due to smaller bundle	[OK] Good

Rendering Pipeline

File-based routing maps URLs to components automatically. When routes are lazy-loaded, the browser fetches component code only when needed, reducing initial parsing and rendering work.

→Network

→Parse & Compile

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Parse & Compile stages due to large upfront bundles

Core Web Vital Affected

LCP, INP

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

Optimization Tips

1Always lazy load page components in file-based routing to reduce initial bundle size.

2Avoid importing all pages eagerly to prevent blocking the main thread during load.

3Use DevTools Performance panel to measure impact on LCP and interaction responsiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading pages in file-based routing?

A Reduces initial bundle size and speeds up first content paint

B Increases the number of DOM nodes on load

C Triggers more reflows during navigation

D Blocks rendering until all pages are loaded

DevTools: Performance

How to check: Record a page load and navigation; look for long scripting or parsing tasks and large bundle sizes in the summary.

What to look for: Look for shorter scripting times and smaller JS download sizes indicating lazy loading is working.