# Frontend Performance {#frontend-performance}


Angular application performance optimizations.


## Build Optimizations {#build-optimizations}



### Production Build {#production-build}


```bash
# AOT compilation + tree shaking + minification
yarn build:prod:gauzy
```


### Lazy Loading {#lazy-loading}


All feature modules are lazy-loaded, reducing initial bundle size:

```typescript
{
  path: 'employees',
  loadChildren: () =>
    import('./employees/employees.module').then(m => m.EmployeesModule),
}
```


### Bundle Analysis {#bundle-analysis}


```bash
# Generate bundle analysis
npx nx build gauzy --stats-json
npx webpack-bundle-analyzer dist/apps/gauzy/stats.json
```


## Runtime Optimizations {#runtime-optimizations}



### OnPush Change Detection {#onpush-change-detection}


Use `ChangeDetectionStrategy.OnPush` for improved rendering:

```typescript
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class EmployeeListComponent {}
```


### TrackBy Functions {#trackby-functions}


```html
<tr *ngFor="let employee of employees; trackBy: trackById"></tr>
```

```typescript
trackById(index: number, item: IEmployee): string {
  return item.id;
}
```


### Virtual Scrolling {#virtual-scrolling}


For large lists:

```html
<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor="let item of items">{{ item.name }}</div>
</cdk-virtual-scroll-viewport>
```


## Asset Optimization {#asset-optimization}


- **Image compression** — WebP format where possible
- **Font subsetting** — load only needed characters
- **Code splitting** — per-route bundles
- **Preloading** — preload next likely routes


## Related Pages {#related-pages}


- [Performance Overview](https://sourcey-gauzy.pages.dev/performance/performance-overview/index.md)
- [Frontend Overview](https://sourcey-gauzy.pages.dev/frontend/frontend-overview/index.md)