6 Sfaturi și trucuri pentru reglarea performanței unghiulare

Angular este un cadru JavaScript puternic pentru construirea de aplicații web, dar pe măsură ce aplicația dvs. crește, poate deveni lent și dificil de gestionat. Reglarea performanței Angular este o parte importantă pentru a vă asigura că aplicația dvs. Angular funcționează fără probleme și eficient.

În acest articol, vom explora câteva sfaturi și trucuri pentru optimizarea performanței aplicației dvs. Angular, inclusiv tehnici pentru îmbunătățirea timpului de încărcare, reducerea dimensiunii aplicației dvs. și reducerea numărului de actualizări DOM inutile. Indiferent dacă sunteți un dezvoltator Angular experimentat sau abia la început, aceste sfaturi și trucuri vă vor ajuta să îmbunătățiți performanța aplicației dvs. și să vă asigurați că aceasta funcționează fără probleme pentru utilizatorii dvs.

Deci, să începem cu tehnicile principale pentru reglarea ușoară a performanței aplicației.

Sfaturi pentru reglarea performanței unghiulare

Există diverse sfaturi prin care puteți îmbunătăți cu ușurință performanța aplicației dvs. unghiulare. Cu toate acestea, am ales șase cele mai bune sfaturi de optimizare a aplicațiilor unghiulare pentru tine. Aici sunt ei:

• Utilizarea AoT Compilation
• Utilizarea strategiei de detectare a modificărilor OnPush
• Folosiți țevi pure
• Folosind TrackBy pe ngFor
• Divizarea codului
• Îmbunătățirea încărcării paginii

Să învățăm despre fiecare dintre ele în detaliu.

Utilizarea AoT Compilation

Un sfat important pentru îmbunătățirea performanței aplicației dvs. Angular este să utilizați compilarea Ahead-of-Time (AoT). AoT este o tehnică care pre-compilează componentele și șabloanele dvs. Angular în timpul construirii, mai degrabă decât să le compilați în timpul execuției. Acest lucru poate îmbunătăți în mod semnificativ timpul de încărcare al aplicației dvs., deoarece browserul nu trebuie să petreacă timp compilând șabloanele și componentele atunci când aplicația este prima încărcată.

AoT ajută, de asemenea, la reducerea dimensiunii aplicației dvs. prin integrarea șabloanelor și a fabricilor de componente în codul JavaScript. Acest lucru reduce numărul de solicitări de rețea necesare pentru a încărca aplicația și reduce dimensiunea totală a aplicației, ceea ce poate ajuta la îmbunătățirea timpului de încărcare.

Pentru a activa compilarea AoT în aplicația dvs. Angular, trebuie să utilizați CLI Angular pentru a vă construi aplicația cu indicatorul „–aot”. Acest lucru va permite compilarea AoT pentru aplicația dvs., iar compilarea rezultată va fi optimizată pentru performanță. În plus, puteți utiliza instrumente precum compilatorul „ngc” direct, care este instrumentul de linie de comandă pe care Angular CLI îl folosește pentru compilarea AoT.

Utilizați strategia de detectare a modificărilor OnPush

Strategia de detectare a modificărilor OnPush este o modalitate de a îmbunătăți performanța unei aplicații Angular, verificând doar modificările unei componente atunci când o proprietate de intrare se modifică sau este emis un eveniment. Acest lucru se opune strategiei implicite „OnPush”, care verifică modificările unei componente și ale tuturor componentelor sale secundare de fiecare dată când există un ciclu de detectare a modificărilor.

Pentru a utiliza strategia OnPush, trebuie să importați modulul ChangeDetectorRef și să setați proprietatea changeDetection a decoratorului @Component al componentei dvs. la ChangeDetectionStrategy.OnPush.

OnPush este o strategie puternică care poate îmbunătăți performanța aplicației dvs., dar o poate face și mai complexă. Asigurați-vă că testați aplicația cu atenție după implementarea acestei strategii pentru a vă asigura că funcționează conform așteptărilor.

Folosiți țevi pure

O țeavă pură în Angular este o țeavă care rulează numai atunci când există o modificare a valorii de intrare sau a parametrilor trecuți țevii. Acest lucru poate îmbunătăți performanța unei aplicații Angular, deoarece reduce numărul de rulări ale unei țevi.

Pentru a crea o țeavă pură în Angular, trebuie să adăugați proprietatea pure: true la decoratorul @Pipe al țevii dvs.

Este important să rețineți că atunci când creați o țeavă pură, Angular va reporni țeavă numai atunci când valoarea de intrare sau parametrii trecuți țevii se schimbă. Dacă conducta se bazează pe alte date sau stare care nu este trecută ca intrare, este posibil ca conducta să nu producă ieșirea corectă.

De asemenea, merită remarcat faptul că, dacă aveți o conductă pură în interiorul unei componente care utilizează strategia de detectare a modificărilor OnPush, aceasta ar executa conducta numai atunci când este emisă o intrare sau un eveniment, ceea ce poate spori și mai mult performanța aplicației dvs.

Rețineți că, dacă utilizați o conductă pură cu o funcție complexă, aceasta ar putea avea un impact negativ asupra performanței aplicației dvs., deoarece conducta nu se va executa până când valoarea de intrare se schimbă. În astfel de cazuri, este mai bine să folosiți țevi impure.

Folosind TrackBy pe ngFor

trackBy este o caracteristică din Angular care vă permite să specificați un identificator unic pentru fiecare articol dintr-o buclă ngFor. Acest lucru poate îmbunătăți performanța unei aplicații Angular prin reducerea numărului de elemente DOM care trebuie create și distruse atunci când colecția se schimbă.

Pentru a utiliza trackBy într-o buclă ngFor, trebuie să transmiteți o funcție ca valoare a atributului trackBy. Funcția ar trebui să preia indexul articolului curent și al articolului în sine și să returneze un identificator unic pentru acel articol.

<div *ngFor="let element de articole; trackBy: trackByFn”>{{ item.name }}</div>

trackByFn(index: număr, articol: oricare) {

return item.id;

}

În acest exemplu, funcția trackByFn returnează identificatorul unic al fiecărui articol ca proprietate a acestuia.

Divizarea codului

Divizarea codului este o tehnică folosită pentru a îmbunătăți performanța aplicațiilor Angular prin reducerea timpului inițial de încărcare a aplicației. Aceasta implică împărțirea codului aplicației în bucăți mai mici, mai ușor de gestionat, care pot fi încărcate la cerere pe măsură ce utilizatorul navighează prin aplicație.

Acest lucru permite aplicației să încarce numai codul necesar pentru pagina curentă, mai degrabă decât să încarce tot codul simultan, ceea ce poate îmbunătăți semnificativ timpul inițial de încărcare a aplicației. Această tehnică poate fi implementată folosind modulul Angular Router și proprietatea loadChildren.

Îmbunătățirea încărcării paginii

Există mai multe moduri de a îmbunătăți încărcarea paginii unei aplicații Angular, dintre care unele includ:

1. Divizarea codului: După cum sa menționat anterior, divizarea codului este o tehnică care implică împărțirea codului aplicației în bucăți mai mici care pot fi încărcate la cerere. Acest lucru poate îmbunătăți semnificativ timpul inițial de încărcare a aplicației.
2. Lazy loading: Lazy loading este o tehnică care implică încărcarea modulelor doar atunci când sunt necesare. Acest lucru poate ajuta, de asemenea, la îmbunătățirea timpului inițial de încărcare a aplicației prin reducerea cantității de cod care trebuie încărcat la încărcarea inițială.
3. Optimizarea imaginilor: optimizarea imaginilor prin comprimarea lor și utilizarea formatului de imagine adecvat poate ajuta, de asemenea, la îmbunătățirea încărcării paginii prin reducerea dimensiunii imaginilor care trebuie descărcate.
4. Utilizarea stocării în cache a browserului: activarea stocării în cache a browserului poate ajuta, de asemenea, la îmbunătățirea încărcării paginii, permițând browserului să stocheze resurse local, astfel încât acestea să nu fie descărcate din nou.

Cuvinte finale

În concluzie, Angular este un cadru puternic și versatil care poate fi folosit pentru a construi aplicații web complexe, de înaltă performanță. Cu toate acestea, ca și în cazul oricărui cadru, există anumite bune practici și tehnici care pot fi utilizate pentru a optimiza performanța unei aplicații Angular. Utilizând tehnici precum împărțirea codului, încărcarea leneșă etc., dezvoltatorii pot îmbunătăți semnificativ timpul de încărcare și performanța generală a aplicațiilor lor Angular.

Smarsh Infotech, o companie populară de externalizare a serviciilor IT poate fi viitorul tău partener de dezvoltare a aplicațiilor. Dacă intenționați să vă dezvoltați afacerea pe platforme digitale, vă putem ajuta în orice mod putem. Să ne conectăm și să discutăm ideile tale de proiect.

Citește și: Noul Angular 14: Citește totul despre asta