How do you lazy-load a route in Vue or Angular?
Tests route-level code splitting. Strong answers mention dynamic imports in Vue Router or Angular loadChildren and highlight a smaller initial JS bundle. Red flag: confusing this with image lazy loading or claiming it speeds up runtime navigation.
What's really being asked
This question evaluates whether you understand route-level code splitting and its impact on initial load performance. Interviewers want to see that you know modern bundlers can create separate chunks for route components and that you can articulate when those chunks should be fetched.
The full answer
First, the implementation syntax for at least one framework, such as passing a dynamic import to the component option in Vue Router or using loadChildren or loadComponent in Angular with a dynamic import. Second, the mechanism: the build tool produces a separate JavaScript chunk, the router downloads it asynchronously when the user hits the route, and then renders the view. Third, the primary benefit, which is reducing the size of the initial JavaScript bundle so the browser parses and executes less code on first load, leading to a faster Time to Interactive.
The mistakes people make
A red flag is confusing route lazy loading with image lazy loading or with server-side rendering. Another mistake is claiming it makes navigation faster; in fact, the first visit to a lazy route can be slightly slower because of the network request. Some candidates also forget to mention dynamic imports and instead talk about generic caching strategies, which misses the point of build-time code splitting.
What usually comes next
An interviewer might ask how to handle loading states while the chunk is being fetched, how to prefetch or preload routes for critical paths, or how lazy loading interacts with server-side rendering and hydration. They may also ask about named chunks or how to group multiple routes into a single lazy-loaded bundle.
A concrete example
In a Vue application with an admin dashboard that most users never visit, you would define the route as path /admin, component ()=> import from the admin view file. The bundler emits a separate file such as admin-dashboard with a hash and js extension. When a user first clicks an admin link, the browser requests that chunk, displays a loading indicator if configured, and then mounts the component. The main entry bundle remains small for the majority of users who only use the public pages.
Interview question
What is the primary effect of configuring a route to be lazy-loaded in Vue or Angular?
- a.The build tool emits a separate JavaScript chunk for the route that is fetched asynchronously when the user first navigates to it, reducing the initial bundle size.Correct
- b.It improves runtime navigation speed by preloading route components in the background before the user clicks a link.
- c.It keeps the route template on the server and streams rendered HTML only when the user requests that path.
- d.It defers loading heavy assets like images and videos on that route until they scroll into the viewport.
Why? this is the answer
Lazy loading relies on dynamic imports so the bundler creates a separate chunk that is only downloaded on the first visit to that route, shrinking the initial JavaScript bundle and improving Time to Interactive. Option B is tempting but wrong because it describes eager prefetching, not lazy loading, and lazy loading can actually make the first visit to a route slightly slower due to the extra network request.
Just read this? Test yourself on what you have been reading.
Read the original → angular.dev
- #vue
- #angular
- #routing
- #performance
- #code-splitting
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on vue — each one lists the topics its interview covers.
See open roles