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.