Nested routes and child views in Vue - Performance & Optimization

Performance: Nested routes and child views

MEDIUM IMPACT

Nested routes affect the rendering speed of views and the complexity of DOM updates when switching between child components.

Rendering nested views in a Vue app using Vue Router

Vue

const routes = [
  {
    path: '/parent',
    component: ParentView,
    children: [
      {
        path: 'child',
        component: () => import('./ChildView.vue') // lazy load child
      }
    ]
  }
];

// In ParentView.vue template
<template>
  <div>
    <router-view /> <!-- renders matched child route -->
  </div>
</template>

Using <router-view> with lazy-loaded child routes defers loading child components until needed, reducing initial bundle size and improving load speed.

📈 Performance GainSaves initial load time by lazy loading child views; reduces memory and DOM nodes until child route is active.

Rendering nested views in a Vue app using Vue Router

Vue

const routes = [
  {
    path: '/parent',
    component: ParentView,
    children: [
      {
        path: 'child',
        component: ChildView
      }
    ]
  }
];

// In ParentView.vue template
<template>
  <div>
    <ChildView /> <!-- directly imported child component -->
  </div>
</template>

Directly importing and rendering child components inside parent without using <router-view> bypasses Vue Router's lazy loading and route management, causing all child components to load upfront.

📉 Performance CostBlocks rendering for all child views on parent load, increasing initial load time and memory usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct child component import inside parent	High (all children mounted upfront)	Multiple reflows on initial load	High paint cost due to many nodes	[X] Bad
Lazy-loaded child routes with <router-view>	Low (children mounted on demand)	Single reflow per route change	Lower paint cost with fewer nodes	[OK] Good

Rendering Pipeline

Nested routes trigger Vue Router to match routes and render components inside <router-view> placeholders. When switching child routes, Vue updates the DOM subtree inside the parent view.

→JavaScript Execution

→DOM Updates

→Paint

→Composite

⚠️ BottleneckDOM Updates due to mounting/unmounting nested child components

Core Web Vital Affected

INP

Nested routes affect the rendering speed of views and the complexity of DOM updates when switching between child components.

Optimization Tips

1Use <router-view> to render nested child routes instead of direct component imports.

2Lazy load child route components to reduce initial bundle size and improve load speed.

3Avoid very deep nesting to minimize DOM complexity and reflow costs.

Performance Quiz - 3 Questions

What is a main performance benefit of using lazy-loaded child routes in Vue?

A Ensures all child components load immediately for faster navigation

B Reduces initial bundle size and delays loading child views until needed

C Increases DOM nodes to improve rendering speed

D Prevents any reflows during route changes

DevTools: Performance

How to check: Record a performance profile while navigating nested routes; look for long scripting and rendering times during route changes.

What to look for: Check for multiple reflows and long scripting tasks when child views mount; fewer and shorter tasks indicate better performance.