Lazy loading components in Vue - Performance & Optimization

Performance: Lazy loading components

HIGH IMPACT

This affects the initial page load speed by deferring component loading until needed, reducing the amount of JavaScript parsed and executed upfront.

Loading a large component only when the user navigates to it

Vue

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    LargeComponent: defineAsyncComponent(() => import('./LargeComponent.vue'))
  }
};

Loads component code only when needed, reducing initial bundle size and speeding up first paint.

📈 Performance GainReduces initial JS bundle by 50-200kb, improving LCP by 200-400ms depending on network.

Loading a large component only when the user navigates to it

Vue

import LargeComponent from './LargeComponent.vue';
export default {
  components: { LargeComponent }
};

Imports the entire component bundle upfront, increasing initial JavaScript size and delaying first contentful paint.

📉 Performance CostBlocks rendering until full component JS is downloaded and parsed, increasing LCP by 300-500ms on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading full component	High (all nodes created upfront)	Multiple reflows during initial render	High paint cost due to large DOM	[X] Bad
Lazy loading with defineAsyncComponent	Lower (nodes created on demand)	Single reflow when component loads	Lower paint cost as DOM grows gradually	[OK] Good

Rendering Pipeline

Lazy loading defers fetching and parsing component code until it is needed, reducing initial style calculation and layout work.

→JavaScript Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Parsing and Execution during initial load

Core Web Vital Affected

LCP

This affects the initial page load speed by deferring component loading until needed, reducing the amount of JavaScript parsed and executed upfront.

Optimization Tips

1Use lazy loading for large or rarely used components to reduce initial bundle size.

2Avoid lazy loading very small components to prevent excessive network requests.

3Combine lazy loading with skeleton loaders or placeholders to improve perceived performance.

Performance Quiz - 3 Questions

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

A Improves CSS selector matching speed

B Reduces initial JavaScript bundle size and speeds up page load

C Prevents layout shifts caused by images

D Caches components permanently in browser memory

DevTools: Performance

How to check: Record page load, filter for scripting and rendering tasks, and observe when component code is fetched and executed.

What to look for: Look for reduced scripting time and delayed component loading in network and flame chart indicating lazy loading.

Practice

1. What is the main benefit of lazy loading components in Vue?

easy

A. It automatically fixes bugs in components.

B. It makes components load faster by preloading all at once.

C. It speeds up the initial loading time by loading components only when needed.

D. It disables components until the user clicks a button.

Solution

1. Step 1: Understand lazy loading purpose

   Lazy loading means loading parts of the app only when needed, not all at once.

2. Step 2: Identify benefit in Vue context

   Loading components only when needed reduces initial load time, making app start faster.

3. Final Answer:

   It speeds up the initial loading time by loading components only when needed. -> Option C

4. Quick Check:

   Lazy loading = faster start [OK]

Hint: Lazy loading delays loading until needed to speed start [OK]

Common Mistakes:

• Thinking lazy loading loads all components at once
• Confusing lazy loading with bug fixing
• Assuming lazy loading disables components

2. Which is the correct way to define a lazy loaded component in Vue using defineAsyncComponent?

easy

A. const MyComp = async import('./MyComp.vue')

B. const MyComp = import('./MyComp.vue')

C. const MyComp = defineComponent('./MyComp.vue')

D. const MyComp = defineAsyncComponent(() => import('./MyComp.vue'))

Solution

1. Step 1: Recall syntax for lazy loading

   Vue uses defineAsyncComponent with a function returning import() to lazy load.

2. Step 2: Match correct syntax

   const MyComp = defineAsyncComponent(() => import('./MyComp.vue')) correctly wraps import in a function passed to defineAsyncComponent.

3. Final Answer:

   const MyComp = defineAsyncComponent(() => import('./MyComp.vue')) -> Option D

4. Quick Check:

   defineAsyncComponent + () => import() = correct [OK]

Hint: Use defineAsyncComponent with arrow function returning import [OK]

Common Mistakes:

• Using import directly without wrapping in a function
• Confusing defineComponent with defineAsyncComponent
• Using async keyword incorrectly with import

3. Given this Vue code snippet, what will be rendered initially?

const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))

export default {
  components: { AsyncComp },
  template: ``
}

medium

A. Nothing renders until AsyncComp finishes loading.

B. The AsyncComp content immediately without delay.

C. An error message because Suspense is not supported.

D. A loading fallback inside Suspense until AsyncComp loads.

Solution

1. Step 1: Understand Suspense behavior

   Suspense shows fallback content only if #fallback slot is provided; otherwise nothing renders while waiting for async components.

2. Step 2: Analyze initial render

   The code provides only default slot, no fallback slot, so nothing renders until AsyncComp resolves.

3. Final Answer:

   Nothing renders until AsyncComp finishes loading. -> Option A

4. Quick Check:

   Suspense no fallback = nothing renders [OK]

Hint: Suspense without fallback renders nothing during lazy load [OK]

Common Mistakes:

• Assuming Suspense shows loading fallback without #fallback slot
• Assuming lazy component renders instantly
• Thinking Suspense is unsupported in Vue 3

4. What is wrong with this lazy loading code snippet?

const AsyncComp = defineAsyncComponent(import('./AsyncComp.vue'))

medium

A. The import call is not wrapped in a function, causing immediate loading.

B. defineAsyncComponent cannot be used with import at all.

C. The import path must be absolute, not relative.

D. Async components must be registered globally, not locally.

Solution

1. Step 1: Check defineAsyncComponent usage

   It requires a function returning import(), not the import promise directly.

2. Step 2: Identify error cause

   Passing import() directly triggers immediate loading, breaking lazy loading.

3. Final Answer:

   The import call is not wrapped in a function, causing immediate loading. -> Option A

4. Quick Check:

   Wrap import in function for lazy loading [OK]

Hint: Always wrap import in a function for defineAsyncComponent [OK]

Common Mistakes:

• Passing import() directly without function
• Thinking import path must be absolute
• Believing async components must be global

5. You want to lazy load two components, CompA and CompB, but only show CompB after CompA finishes loading and rendering. Which approach correctly achieves this?

hard

A. Import both components normally without lazy loading and use v-if to show CompB after CompA.

B. Use two Suspense components, render CompA inside first Suspense, then conditionally render CompB after CompA loads.

C. Load both components with defineAsyncComponent and render them together inside one Suspense.

D. Lazy load CompB inside CompA component's setup function.

Solution

1. Step 1: Understand sequential lazy loading need

   We want CompB to appear only after CompA fully loads and renders.

2. Step 2: Use Suspense and conditional rendering

   Wrap CompA in Suspense to handle loading, then show CompB conditionally after CompA is ready.

3. Final Answer:

   Use two Suspense components, render CompA inside first Suspense, then conditionally render CompB after CompA loads. -> Option B

4. Quick Check:

   Sequential lazy load needs Suspense + conditional render [OK]

Hint: Use Suspense + conditional render for sequential lazy components [OK]

Common Mistakes:

• Rendering both lazy components together without order control
• Not using Suspense for loading states
• Trying to lazy load inside setup without Suspense