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.