Lazy loading routes in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a route is lazy loaded in Vue?

Consider a Vue app using lazy loading for routes. What is the main effect on the app's behavior?

A The route's component is loaded immediately when the app starts, increasing initial load time.

B The route's component is loaded only when the user navigates to that route, reducing initial load time.

C The route's component is never loaded unless manually imported elsewhere in the app.

D The route's component is loaded multiple times every time the route is visited.

💡 Hint

Think about how lazy loading helps with app performance by delaying loading.

Lazy loading means the component code is fetched only when needed, so the app starts faster.

📝 Syntax

intermediate

Which Vue router syntax correctly lazy loads a route component?

Given Vue Router, which option correctly lazy loads the About component?

Vue

const routes = [
  {
    path: '/about',
    component: /* ??? */
  }
];

A component: () => require('./components/About.vue')

B component: import('./components/About.vue')

C component: require('./components/About.vue')

D component: () => import('./components/About.vue')

💡 Hint

Lazy loading uses a function that returns a dynamic import promise.

The correct syntax uses an arrow function returning import() to lazy load the component.

🔧 Debug

advanced

Why does this lazy loaded route cause a runtime error?

Look at this route definition:

const routes = [{ path: '/home', component: import('./Home.vue') }];

What error will occur and why?

A TypeError because component expects a function returning a Promise, but got a Promise directly.

B SyntaxError because import cannot be used inside an object literal.

C ReferenceError because './Home.vue' does not exist.

D No error; the route will lazy load correctly.

💡 Hint

Check what the component property expects for lazy loading.

The component property must be a function returning a Promise, not the Promise itself. Using import() directly returns a Promise, causing a TypeError.

❓ state_output

advanced

What is the effect on bundle size when using lazy loading for routes?

In a Vue app, if you lazy load the Profile route component, what happens to the app's initial JavaScript bundle size?

A The initial bundle size decreases because the Profile component code is split into a separate chunk.

B The initial bundle size increases because lazy loading adds extra code to manage chunks.

C The initial bundle size stays the same because all components are bundled together anyway.

D The initial bundle size becomes zero because no components are loaded initially.

💡 Hint

Think about how code splitting affects the main bundle.

Lazy loading splits the component into a separate file, so the main bundle is smaller and loads faster.

🧠 Conceptual

expert

Why might you combine lazy loading with route prefetching in Vue?

Lazy loading delays loading a route's component until navigation. Prefetching loads it earlier. Why combine both?

A To prevent any component from ever loading unless manually triggered.

B To increase initial load time by loading all components upfront.

C To improve user experience by loading components just before navigation without increasing initial load time.

D To disable lazy loading and always load components synchronously.

💡 Hint

Consider balancing fast startup and smooth navigation.

Prefetching loads lazy components in the background before the user navigates, so navigation feels instant without slowing initial load.

Practice

1. What is the main benefit of using lazy loading for routes in Vue?

easy

A. It automatically caches all components in the browser.

B. It preloads all components at app start for faster navigation.

C. It loads components only when the route is visited, reducing initial load time.

D. It disables routing and shows all components on one page.

Solution

1. Step 1: Understand lazy loading concept

   Lazy loading means loading something only when it is needed, not before.

2. Step 2: Apply to Vue routes

   In Vue, lazy loading routes means components load only when their route is visited, reducing initial app size and speeding start time.

3. Final Answer:

   It loads components only when the route is visited, reducing initial load time. -> Option C

4. Quick Check:

   Lazy loading = load on demand [OK]

Hint: Lazy loading means load components only when needed [OK]

Common Mistakes:

• Thinking lazy loading preloads all components
• Confusing lazy loading with caching
• Believing lazy loading disables routing

2. Which of the following is the correct syntax to lazy load a route component in Vue Router?

easy

A. component: import('./MyComponent.vue')

B. component: './MyComponent.vue'

C. component: () => require('./MyComponent.vue')

D. component: () => import('./MyComponent.vue')

Solution

1. Step 1: Recall Vue Router lazy loading syntax

   Vue Router uses dynamic import with arrow function: () => import('path').

2. Step 2: Check each option

   component: () => import('./MyComponent.vue') matches correct syntax. component: import('./MyComponent.vue') misses arrow function. component: () => require('./MyComponent.vue') uses require which is not standard for lazy loading in Vue 3. component: './MyComponent.vue' is just a string, not a function.

3. Final Answer:

   component: () => import('./MyComponent.vue') -> Option D

4. Quick Check:

   Lazy load syntax = arrow function + import() [OK]

Hint: Lazy load uses arrow function returning import() [OK]

Common Mistakes:

• Omitting arrow function
• Using require() instead of import()
• Assigning component to string path directly

3. Given this Vue Router route config, what will happen when the user visits '/dashboard' for the first time?

const routes = [
  {
    path: '/dashboard',
    component: () => import('./Dashboard.vue')
  }
]

medium

A. The Dashboard component is loaded immediately when the app starts.

B. The Dashboard component is loaded only when the '/dashboard' route is visited.

C. The Dashboard component is never loaded.

D. The Dashboard component is loaded twice.

Solution

1. Step 1: Analyze the route config

   The component is assigned as a function returning import(), which means lazy loading.

2. Step 2: Understand lazy loading behavior

   The component will load only when the route '/dashboard' is visited, not before.

3. Final Answer:

   The Dashboard component is loaded only when the '/dashboard' route is visited. -> Option B

4. Quick Check:

   Lazy load means load on visit [OK]

Hint: Lazy loaded components load on route visit, not app start [OK]

Common Mistakes:

• Assuming component loads at app start
• Thinking component never loads
• Believing component loads multiple times automatically

4. Identify the error in this Vue Router lazy loading route config:

const routes = [
  {
    path: '/profile',
    component: import('./Profile.vue')
  }
]

medium

A. Missing arrow function wrapping the import call.

B. The path should be '/profiles' instead of '/profile'.

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

D. Lazy loading is not supported in Vue Router.

Solution

1. Step 1: Check lazy loading syntax

   Lazy loading requires component to be a function returning import(), like () => import('...').

2. Step 2: Identify the error

   Here, import() is called directly without arrow function, causing immediate import and syntax error.

3. Final Answer:

   Missing arrow function wrapping the import call. -> Option A

4. Quick Check:

   Lazy load needs () => import() [OK]

Hint: Lazy load must use arrow function wrapping import() [OK]

Common Mistakes:

• Calling import() directly without arrow function
• Changing path unnecessarily
• Believing lazy loading is unsupported

5. You want to lazy load two nested routes in Vue Router: '/settings' and '/settings/profile'. Which is the correct way to configure lazy loading for both routes?

hard

A. Use component: () => import() for both routes inside children array.

B. Lazy load only the parent route; child routes load immediately.

C. Use static imports for both routes to avoid delays.

D. Define child routes outside the parent route config.

Solution

1. Step 1: Understand nested route lazy loading

   Each route can lazy load its component independently using () => import().

2. Step 2: Apply to nested routes

   Both '/settings' and '/settings/profile' should have component properties with arrow functions returning import() to lazy load separately.

3. Step 3: Check other options

   Lazy load only the parent route; child routes load immediately. is wrong because child routes won't lazy load automatically. Use static imports for both routes to avoid delays. disables lazy loading. Define child routes outside the parent route config. is unrelated to lazy loading.

4. Final Answer:

   Use component: () => import() for both routes inside children array. -> Option A

5. Quick Check:

   Lazy load each nested route with () => import() [OK]

Hint: Lazy load each nested route with arrow function import() [OK]

Common Mistakes:

• Lazy loading only parent route
• Using static imports for lazy loading
• Separating child routes incorrectly