How do you lazy-load a route in Vue or Angular?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.

Source: angular.dev