Zum Hauptinhalt springen

Frontend Performance

Angular application performance optimizations.

Build Optimizations​

Production Build​

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

Lazy Loading​

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

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

Bundle Analysis​

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

Runtime Optimizations​

OnPush Change Detection​

Use ChangeDetectionStrategy.OnPush for improved rendering:

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

TrackBy Functions​

<tr *ngFor="let employee of employees; trackBy: trackById"></tr>
trackById(index: number, item: IEmployee): string {
  return item.id;
}

Virtual Scrolling​

For large lists:

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

Asset Optimization​

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