# Lazy Loading & Preloading Strategies {#lazy-loading--preloading-strategies}


Optimize Angular bundle size with lazy loading.


## Lazy Loading {#lazy-loading}


Feature modules are loaded on demand:

```typescript
const routes: Routes = [
  {
    path: "tasks",
    loadChildren: () =>
      import("./tasks/tasks.module").then((m) => m.TasksModule),
  },
  {
    path: "employees",
    loadChildren: () =>
      import("./employees/employees.module").then((m) => m.EmployeesModule),
  },
];
```


## Preloading Strategies {#preloading-strategies}



### PreloadAllModules {#preloadallmodules}


Preloads all lazy modules after the app loads:

```typescript
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })
  ]
})
```


### Custom Preloading {#custom-preloading}


Preload only modules the user is likely to visit:

```typescript
@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data?.["preload"] ? load() : of(null);
  }
}
```


## Bundle Analysis {#bundle-analysis}


```bash
# Analyze bundle sizes
yarn build --stats-json
npx webpack-bundle-analyzer dist/stats.json
```


## Tips {#tips}


- Keep feature modules independent
- Use `SharedModule` for common components
- Avoid importing large libraries in `CoreModule`
- Use dynamic imports for heavy components


## Related Pages {#related-pages}


- [Angular Module Architecture](https://sourcey-gauzy.pages.dev/frontend/angular-module-architecture/index.md) — module structure
- [Frontend Performance](https://sourcey-gauzy.pages.dev/performance/frontend-performance/index.md) — optimization