Lazy loading components in Vue - Step-by-Step Execution

Concept Flow - Lazy loading components

Start App

↓

User triggers component

↓

Check if component loaded?

Yes→Render component

No↓

Load component asynchronously

↓

Component loaded

↓

Render component

The app waits until a component is needed, then loads it asynchronously before rendering.

Execution Sample

Vue

import { defineAsyncComponent } from 'vue';

const LazyComp = defineAsyncComponent(() => import('./LazyComp.vue'));

export default {
  components: { LazyComp }
};

This code sets up a Vue component to load only when used, saving initial load time.

Execution Table

Step	Action	Component Loaded?	Result
1	App starts, no lazy component used	No	App renders without LazyComp
2	User triggers LazyComp display	No	Start loading LazyComp asynchronously
3	LazyComp finishes loading	Yes	LazyComp is ready to render
4	Render LazyComp	Yes	LazyComp appears on screen
5	User triggers LazyComp again	Yes	LazyComp renders immediately without loading

💡 Lazy component loads only once when first needed, then reuses loaded version.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
LazyComp Loaded	false	false	true	true	true

Key Moments - 2 Insights

Why doesn't the lazy component load when the app starts?

Because the component is wrapped in defineAsyncComponent and only loads when triggered, as shown in execution_table step 2.

What happens if the user triggers the lazy component multiple times?

After the first load (step 3), the component is cached and renders immediately on subsequent triggers (step 5).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the lazy component finish loading?

A Step 3

B Step 2

C Step 4

D Step 5

💡 Hint

Check the 'Component Loaded?' column in the execution_table at each step.

According to variable_tracker, what is the value of 'LazyComp Loaded' after step 4?

A false

B undefined

C true

D null

💡 Hint

Look at the 'After Step 4' column for 'LazyComp Loaded' in variable_tracker.

If the user never triggers the lazy component, what will be the value of 'LazyComp Loaded'?

A true

B false

C null

D undefined

💡 Hint

Refer to the 'Start' value in variable_tracker and step 1 in execution_table.

Concept Snapshot

Lazy loading components in Vue:
- Use defineAsyncComponent(() => import('...'))
- Component loads only when first used
- Saves initial load time
- After loading, component is cached
- Subsequent uses render instantly

Full Transcript

Lazy loading components in Vue means the app does not load some components until the user needs them. This saves time when the app starts. The code uses defineAsyncComponent with a function that imports the component file. When the user triggers the component, Vue loads it asynchronously. After loading, the component is cached and shows immediately on later uses. The execution table shows the steps: app start without loading, user triggers load, component loads, then renders. The variable tracker shows the loading state changes from false to true. This helps beginners see how lazy loading delays work and improves app speed.

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