Lazy loading components in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is lazy loading of components in Vue?

Lazy loading means loading a component only when it is needed, not when the app starts. This helps the app start faster and saves data.

beginner

How do you define a lazy loaded component in Vue 3 using defineAsyncComponent?

You use defineAsyncComponent(() => import('./MyComponent.vue')) to tell Vue to load the component only when it is needed.

intermediate

Why is lazy loading components helpful in large Vue applications?

It reduces the initial load time by splitting the app into smaller parts. Users download only what they need at first, making the app feel faster.

beginner

What is the difference between eager loading and lazy loading components?

Eager loading loads all components when the app starts. Lazy loading loads components only when they are needed, saving time and resources.

intermediate

Show a simple example of lazy loading a Vue component in the template.

In script setup: <code>const MyComponent = defineAsyncComponent(() =&gt; import('./MyComponent.vue'))</code>. In template: <code>&lt;MyComponent /&gt;</code>. Vue loads it only when used.

What does lazy loading a Vue component do?

A Loads the component only when it is needed

B Loads all components at app start

C Preloads components in the background

D Removes components from the app

Lazy loading means loading components only when they are needed, not all at once.

Which Vue function helps create a lazy loaded component?

A useLazyLoad

B createComponent

C defineAsyncComponent

D loadComponent

defineAsyncComponent is the official Vue function to define lazy loaded components.

Why is lazy loading good for user experience?

A It makes the app start faster by loading less at first

B It makes the app use more memory

C It delays all component loading until user clicks a button

D It disables components until needed

Lazy loading reduces initial load time, so the app feels faster to users.

How do you import a component lazily in Vue?

A loadComponent('./MyComponent.vue')

B import('./MyComponent.vue') inside defineAsyncComponent

C useLazyLoad('./MyComponent.vue')

D import MyComponent from './MyComponent.vue'

You wrap the dynamic import inside defineAsyncComponent for lazy loading.

What happens if you don’t lazy load components in a big app?

A Components load faster

B The app will never load

C The app uses less memory

D The app may load slowly at start

Without lazy loading, all components load at once, which can slow down the app start.

Explain how lazy loading components works in Vue and why it improves app performance.

Think about when the component code is downloaded and used.

Describe the steps to convert a normal Vue component import into a lazy loaded component.

Focus on changing how the component is imported and registered.

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