Suggest an editImprove this articleRefine the answer for “What is lazy loading of routes?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Lazy loading of routes** is a technique where route components are loaded **not right when the application starts**, but **only when the user first navigates to the corresponding route**. **Key point:** the component loads only at the moment of navigating to it, which significantly shrinks the bundle size on first page load and speeds up the SPA's startup.Shown above the full answer for quick recall.Answer (EN)Image**Lazy loading of routes** is a technique where route components are loaded **not right when the application starts**, but **only when the user first navigates to the corresponding route**. In other words: > **Lazy loading is "lazy" loading of pages.** > **The component loads only at the moment you navigate to it.** This significantly shrinks the bundle size on first page load and speeds up the SPA's startup. --- ## A short lazy loading route example ```js const routes = [ { path: '/about', component: () => import('../views/About.vue') } ] ``` Here: - `() => import()` is a dynamic import - Webpack/Vite automatically create a separate chunk file - the file loads only when the user opens `/about` --- ## Why is lazy loading needed? 1. **It reduces the initial bundle size** (especially if the application has more than 20 pages) 2. **It speeds up the application's load time** The user sees the first screen faster (LCP). 3. **SSR and SEO optimization** Routes load when they're actually needed. 4. **It works out of the box in Vue Router** No complex setup required. --- ## How does it work under the hood? - `import()` returns a Promise. - Vue Router waits for the file to load. - When loading finishes, it renders the component. A separate chunk appears in the bundle, for example: ``` about.[hash].js ``` --- ## Example with a chunk name (Webpack) ```js component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') ``` --- ## Lazy loading and nested routes It works exactly the same way: ```js { path: '/users/:id', component: () => import('@/pages/User.vue'), children: [ { path: 'posts', component: () => import('@/pages/UserPosts.vue') } ] } ``` --- ## Lazy loading + groups of routes You can split the application into *logical modules*, for example: ``` /admin → loads only when needed /account → also lazy /dashboard → also lazy ```For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.