RouterView for rendering in Vue - Performance & Optimization

Performance: RouterView for rendering

MEDIUM IMPACT

RouterView affects page load speed and rendering by controlling which components are mounted and displayed based on the route, impacting initial render and updates.

Rendering route components in a Vue app

Vue

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

// Use <router-view v-slot="{ Component }">
//   <keep-alive>
//     <component :is="Component" />
//   </keep-alive>
// </router-view>

Lazy loads route components and caches them with keep-alive to avoid re-mounting, reducing load and reflows.

📈 Performance Gainsingle reflow on first load, faster navigation with cached components

Rendering route components in a Vue app

Vue

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

// In App.vue template
<router-view />

// No caching

Route components re-mount fully on each navigation, causing slower navigation and repeated reflows.

📉 Performance Costblocks rendering for extra 100-200ms on navigation, triggers multiple reflows

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
RouterView without caching	High (remounts the route component on navigation)	Multiple reflows per navigation	High paint cost due to full remount	[X] Bad
RouterView with lazy loading and keep-alive	Low (mounts only needed components, caches them)	Single reflow on first load	Low paint cost on navigation	[OK] Good

Rendering Pipeline

RouterView controls which Vue components are mounted or unmounted based on the current route, affecting the browser's layout and paint stages when components change.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to mounting/unmounting components and DOM changes

Core Web Vital Affected

LCP

RouterView affects page load speed and rendering by controlling which components are mounted and displayed based on the route, impacting initial render and updates.

Optimization Tips

1Use lazy loading for route components to improve initial load speed.

2Wrap RouterView components in keep-alive to cache and avoid remounts.

3Avoid mounting unnecessary components to reduce layout thrashing.

Performance Quiz - 3 Questions

What is the main performance benefit of using <keep-alive> with RouterView in Vue?

A It caches route components to avoid remounting on navigation

B It preloads all route components at startup

C It disables routing to speed up rendering

D It reduces CSS selector complexity

DevTools: Performance

How to check: Record a performance profile while navigating routes. Look for long scripting or layout times during route changes.

What to look for: High layout or scripting times indicate heavy remounting; lower times with cached components show better performance.