Optimizimi i performancës në Angular: Strategji dhe mjete

Hyrje: Performanca është një veçori

Në një treg ku 53% e përdoruesve mobile braktisin një faqe që merr më shumë se 3 sekonda për t’u ngarkuar (burimi: Google/SOASTA), performanca nuk është një optimizim opsional— është një kërkesë produkti. Për aplikacionet Angular, kjo përkthehet në zgjedhje të sakta arkitekturore, mjete të integruara për profilim dhe strategji inteligjente të renderimit.

Në këtë guidë do të eksplorojmë teknikat më efektive për të optimizuar një aplikacion Angular— nga kompilimi te bundle, nga change detection te cache HTTP—me shembuj realë kodi dhe metrika referuese.

Temat: #Angular #Performance #LazyLoading #ChangeDetection #WebDevelopment

Seksioni 1: Kompilimi AOT dhe Build i Optimizuar

Kompilimi Ahead-of-Time (AOT)

Angular kompilon template-t HTML në JavaScript gjatë fazës së build-it, jo në runtime në browser. Që nga Angular 9, AOT është aktiv si default në prodhim dhe sjell tre përfitime:

• Bundle më i vogël: kompileri Angular (@angular/compiler) nuk përfshihet në bundle final.
• Renderim më i shpejtë: browser-i merr JavaScript të gatshëm.
• Zbulim i hershëm i gabimeve: gabimet kapen gjatë build-it.

ng build --configuration production

Tree Shaking dhe Analiza e Bundle

// ❌ Import i plotë
import * as _ from 'lodash';

// ✅ Import specifik
import chunk from 'lodash/chunk';

// ✅ Pa varësi
const result = [[1,2],[3,4]];

Seksioni 2: Lazy Loading — Ngarko vetëm atë që duhet

// app.routes.ts
export const APP_ROUTES = [
  {
    path: '',
    loadComponent: () => import('./home').then(m => m.HomeComponent),
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin').then(m => m.ADMIN_ROUTES),
  }
];

Seksioni 3: Change Detection

// OnPush strategy
changeDetection: ChangeDetectionStrategy.OnPush;

// ❌ Mutim
this.post.title = 'Titull i ri';

// ✅ Referencë e re
this.post = { ...this.post, title: 'Titull i ri' };

Signals

const count = signal(0);
const doubled = computed(() => count() * 2);

Seksioni 4: Optimizimi i HTTP

// Cache interceptor
const cache = new Map();

if (cache.has(req.url)) {
  return of(cache.get(req.url));
}

Seksioni 5: Optimizimi i Imazheve

<img ngSrc="/assets/img.webp" width="400" height="200" />

Seksioni 6: Varësitë e jashtme

// ❌ moment.js
import moment from 'moment';

// ✅ Native
new Intl.DateTimeFormat('sq-AL').format(new Date());

Seksioni 7: Mjetet e Profilimit

lighthouse https://site.com

Përmbledhje

• ✅ Build production
• ✅ Lazy loading
• ✅ OnPush
• ✅ Cache HTTP

Përfundim

Optimizimi nuk është një hap i vetëm, por një proces i vazhdueshëm që kombinon arkitekturën, kodin dhe matjen e vazhdueshme të performancës.