Introduction
Lazy loading is a technique that loads application features only when users actually need them instead of downloading everything during the initial page load. This results in smaller initial bundles, faster startup times, and improved overall performance.
In this guide, you’ll learn what Angular lazy loading is, why it matters, how it works, and how to implement it using Angular 20+.
What is Lazy Loading?
Lazy loading is a design pattern where parts of an application are loaded only when they are required.
Instead of downloading the entire application during the initial visit, Angular downloads only the code necessary for the current route. Additional features are fetched automatically when the user navigates to them.
For example:
Without lazy loading:
Application
├── Home
├── Dashboard
├── Reports
├── Settings
├── Admin
└── Analytics
Everything is downloaded immediately.
With lazy loading:
Initial Load
├── Home
└── Core Files
Later Downloads
├── Dashboard
├── Reports
├── Settings
├── Admin
└── Analytics
Each feature is downloaded only when needed.
Why Use Lazy Loading?
Lazy loading offers several important benefits.
1. Faster Initial Page Load
Since fewer files are downloaded initially, users can start using the application much sooner.
This is especially important for mobile users and slower internet connections.
2. Reduced Bundle Size
Instead of generating one massive JavaScript bundle, Angular creates multiple smaller chunks.
Example:
Without lazy loading:
main.js = 5 MB
With lazy loading:
main.js = 900 KB
dashboard.chunk.js = 700 KB
admin.chunk.js = 650 KB
reports.chunk.js = 850 KB
Only the required chunks are downloaded.
3. Better Performance
Smaller bundles mean:
- Faster parsing
- Faster compilation
- Reduced memory usage
- Better browser performance
4. Improved User Experience
Users can access the homepage immediately while additional features load in the background when needed.
5. Scalability
Large enterprise applications often contain dozens of modules.
Lazy loading allows teams to organize features independently without affecting application startup performance.
How Lazy Loading Works?
Angular Router supports lazy loading using dynamic imports.
Instead of importing components directly, Angular loads them only when the user navigates to a specific route.
For example:
User opens website
↓
Angular loads:
- Main bundle
- Home page
- Shared resources
↓
User clicks Dashboard
↓
Angular downloads Dashboard bundle
↓
Dashboard appears
This process happens automatically.
Lazy Loading in Angular 20+
Angular 20 encourages the use of standalone components rather than traditional NgModules.
A route can lazily load a standalone component using loadComponent.
Example:
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'dashboard',
loadComponent: () =>
import('./dashboard/dashboard.component')
.then(m => m.DashboardComponent)
}
];
Angular downloads the Dashboard component only when the user navigates to /dashboard.
Lazy Loading Feature Routes
Entire feature areas can also be lazy loaded using loadChildren.
Example:
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.routes')
.then(m => m.ADMIN_ROUTES)
}
Inside admin.routes.ts:
import { Routes } from '@angular/router';
export const ADMIN_ROUTES: Routes = [
{
path: '',
loadComponent: () =>
import('./admin.component')
.then(c => c.AdminComponent)
}
];
This separates the Admin feature into its own downloadable bundle.
Project Structure Example
A well-organized Angular project might look like this:
src/
app/
├── home/
├── dashboard/
├── admin/
├── reports/
├── settings/
├── shared/
├── core/
└── app.routes.ts
Each major feature becomes an independent lazy-loaded section.
Preloading Strategies
Sometimes you want the best of both worlds:
- Fast initial loading
- Faster navigation later
Angular provides preloading strategies.
Example:
provideRouter(
routes,
withPreloading(PreloadAllModules)
)
Behavior:
- Application loads.
- Home page becomes usable.
- Angular quietly downloads lazy-loaded modules in the background.
- Future navigation becomes almost instant.
Lazy Loading Standalone Components
Angular 20 makes standalone components the preferred approach.
Example:
{
path: 'profile',
loadComponent: () =>
import('./profile/profile.component')
.then(c => c.ProfileComponent)
}
Advantages:
- Less boilerplate
- Simpler routing
- Smaller bundles
- Better maintainability
Best Practices
1. Keep Features Independent
Group related functionality together.
Example:
User Module
- Login
- Register
- Forgot Password
- Profile
Instead of loading each page separately, load the feature as one bundle.
2. Avoid Huge Shared Modules
Import only what each feature needs.
Large shared dependencies reduce the benefits of lazy loading.
3. Lazy Load Rarely Used Features
Good candidates include:
- Admin Panel
- Reports
- Analytics
- User Management
- Settings
- Billing
Frequently visited pages such as Home should usually remain eagerly loaded.
4. Optimize Images
Lazy loading JavaScript is only part of optimization.
Also optimize:
- Images
- Fonts
- Icons
- Videos
This further improves performance.
5. Use Route Guards Carefully
Route guards work well with lazy loading but should not perform unnecessary network requests that delay navigation.
Keep guards lightweight whenever possible.
Common Mistakes
1. Lazy Loading Everything
Very small components don’t need lazy loading.
Too many tiny bundles may increase HTTP requests and reduce performance.
2. Large Shared Dependencies
If every feature imports the same heavy library, users may repeatedly download similar code.
Organize shared dependencies wisely.
3. Ignoring Bundle Analysis
Use Angular build reports and bundle analysis tools to identify oversized bundles.
Monitoring bundle size helps maintain good performance over time.
Real-World Example
Imagine an e-commerce application.
Home
Products
Cart
Checkout
Orders
Admin
Analytics
A good strategy would be:
Initial Load
- Home
- Product Listing
- Navigation
Lazy Loaded
- Cart
- Checkout
- Orders
- User Profile
- Admin Dashboard
- Analytics
Most visitors never access the Admin dashboard, so there’s no reason to include its code in the initial download.
Advantages and Disadvantages
Advantages
- Faster initial page load
- Smaller JavaScript bundles
- Better SEO performance
- Improved user experience
- Lower memory usage
- Easier scalability
- Better application organization
Disadvantages
- Slight delay when opening a feature for the first time
- More route configuration
- Requires thoughtful project organization
- Poor implementation can create too many small network requests
Fortunately, Angular’s preloading strategies help minimize these drawbacks.
When Should You Use Lazy Loading?
Lazy loading is recommended when:
- Your application has multiple feature areas.
- The JavaScript bundle exceeds a few hundred kilobytes.
- Some features are accessed infrequently.
- Performance is a priority.
- You’re building enterprise-scale applications.
Conclusion
Lazy loading is one of the most effective performance optimization techniques available in Angular 20+. By loading features only when they are needed, you can significantly reduce initial bundle size, improve startup speed, and create a smoother experience for users.
Modern Angular simplifies lazy loading through standalone components, dynamic imports, and an improved router API. Combined with preloading strategies and a well-structured project architecture, lazy loading enables applications to scale efficiently while maintaining excellent performance.