SaptarshiTech.In
Hire Me
Route-Level Lazy Loading in Angular: Best Practices for Small Bundles
Route-Level Lazy Loading in Angular: Best Practices for Small Bundles

Route-Level Lazy Loading in Angular: Best Practices for Small Bundles

Saptarshi Chakraborty

Saptarshi Chakraborty

August 21, 2026 • 1 min read

A complete guide on setting up route-level lazy loading in Angular to reduce initial bundle size and boost page speed.

Table of Contents

Loading your entire application bundle on first paint slows down conversions. Route-level lazy loading loads chunks on demand as users navigate. If you want to optimize your startup app's load time, you should hire Angular developer Pune to set up smart preloading strategies.

Structuring Router Configurations

Instead of statically importing component classes at the top of your router file, use the dynamic import statement. This signals the bundler (like esbuild or webpack) to build a separate JS chunk for that route:

export const routes: Routes = [
  {
    path: 'analytics',
    loadComponent: () => import('./pages/analytics/analytics.component').then(m => m.AnalyticsComponent)
  }
];

Preloading Strategies

To keep navigations smooth, configure a preloading strategy in your router config. This tells Angular to download lazy routes in the background after the main bundle loads. Angular provides `PreloadAllModules` out-of-the-box, or you can write a custom preloader to load specific pages first.

Topics

You might also like

Back to All Blogs