midVue.js
Explain 'Lazy Loading' routes in Vue Router.
Updated May 4, 2026
Short answer
Lazy loading splits your app into chunks and loads route components only when the route is visited.
Deep explanation
Instead of importing components at the top of your router file, you use dynamic imports (import()). This tells the bundler (Vite/Webpack) to create a separate JS file for that route, keeping the initial bundle size small.
Real-world example
An admin dashboard where the 'Analytics' section is heavy and only used by 5% of users; lazy loading keeps it out of the main bundle.
Common mistakes
- Importing components both at the top and in the route definition, which duplicates the code.
Follow-up questions
- How do you group multiple routes into the same chunk?