Încărcare leneșă în Angular (Pune-o să funcționeze pe site-ul tău web)

Angular este un cadru JavaScript frontend dezvoltat de Google pentru construirea de aplicații web scalabile de nivel enterprise. Unele dintre aceste aplicații pot deveni destul de mari, afectând timpul de încărcare al aplicației dvs.

Pentru a reduce timpul de încărcare și pentru a îmbunătăți experiența generală a utilizatorilor dvs., puteți utiliza o tehnică cunoscută sub numele de încărcare leneră. Această caracteristică nativă Angular vă permite să încărcați mai întâi numai biții necesari ai aplicației web, apoi să încărcați alte module după cum este necesar.

În acest articol, veți afla despre încărcarea leneșă și cum vă poate ajuta la accelerarea aplicației dvs. web.

Ce este Lazy Loading?

Lazy loading se referă la tehnica de încărcare a elementelor paginii web numai atunci când acestea sunt necesare. Omologul său este încărcarea dornică , când totul se încarcă - sau încearcă să se încarce - imediat. Preluarea cu nerăbdare a tuturor imaginilor, videoclipurilor, CSS și codului JavaScript poate însemna timpi lungi de încărcare - vești proaste pentru utilizatori.

Încărcarea leneră este adesea folosită pentru imagini și videoclipuri de pe site-uri care găzduiesc mult conținut. În loc să încărcați toate mediile simultan, ceea ce ar folosi o lățime de bandă mare și ar bloca vizualizările paginii, acele elemente sunt încărcate atunci când locația lor pe pagină este pe cale să defileze pentru a vedea.

Angular este un cadru de aplicație cu o singură pagină care se bazează pe JavaScript pentru o mare parte a funcționalității sale. Colecția de JavaScript a aplicației dvs. poate deveni cu ușurință mare pe măsură ce aplicația crește, iar acest lucru vine cu o creștere corespunzătoare a utilizării datelor și a timpului de încărcare. Pentru a accelera lucrurile, puteți utiliza încărcare leneră pentru a prelua mai întâi modulele necesare și a amâna încărcarea altor module până când sunt necesare.

Beneficiile Lazy Loading în Angular

Încărcarea leneră oferă beneficii care vă vor face site-ul mai ușor de utilizat. Acestea includ:

• Timp de încărcare mai rapid: JavaScript conține instrucțiuni pentru afișarea paginii și încărcarea datelor acesteia. Din acest motiv, este o resursă de blocare a randării . Aceasta înseamnă că browserul trebuie să aștepte pentru a încărca tot JavaScript înainte de a vă randa pagina. Când se încarcă leneș în Angular, JavaScript este împărțit în bucăți care sunt încărcate separat. Porțiunea inițială conține doar logica necesară pentru modulul principal al paginii. Se incarca cu nerabdare, apoi modulele ramase se incarca alene. Prin reducerea dimensiunii fragmentului inițial, veți face ca site-ul să se încarce și să fie randat mai rapid.
• Mai puțină utilizare a datelor: împărțind datele în bucăți și încărcându-le după cum este necesar, este posibil să utilizați mai puțină lățime de bandă.
• Resurse conservate de browser: Deoarece browserul încarcă numai bucățile necesare, nu irosește memoria și CPU încercând să interpreteze și să redea codul care nu este necesar.

Implementarea Lazy Loading în Angular

Pentru a urma acest tutorial, veți avea nevoie de următoarele:

• NodeJS instalat
• Cunoștințe de bază de Angular

Creșteți-vă proiectul

Veți folosi CLI-ul Angular pentru a vă crea proiectul. Puteți instala CLI folosind npm rulând comanda:

npm install -g @angular/cli

După aceea, creați un proiect numit Lazy Loading Demo, astfel:

ng new lazy-loading-demo --routing

Această comandă creează un nou proiect Angular, complet cu rutare. Veți lucra exclusiv în folderul src/app , care conține codul aplicației dvs. Acest folder conține fișierul principal de rutare, app-routing.module.ts . Structura folderului ar trebui să arate astfel:

Creați un modul de caracteristici cu rute

Apoi, veți crea un modul de caracteristici care se va încărca leneș. Pentru a crea acest modul, rulați această comandă:

ng generate module blog --route blog --module app.module

Această comandă creează un modul numit BlogModule , împreună cu rutare. Dacă deschideți src /app/app-routing.module.ts , veți vedea că acum arată așa:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Partea care este importantă pentru încărcarea leneșă este a treia linie:

 const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];

Acea linie definește rutele. Ruta pentru blog folosește argumentul loadChildren în loc de component . Argumentul loadChildren îi spune lui Angular să încarce leneș ruta — să importe dinamic modulul numai atunci când ruta este vizitată și apoi să-l returneze la router. Modulul își definește propriile rute copil, cum ar fi blog/** , în fișierul său routing.module.ts . Modulul de blog pe care l-ați generat arată astfel:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { BlogComponent } from './blog.component'; const routes: Routes = [{ path: '', component: BlogComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class BlogRoutingModule { }

Veți observa că acest fișier de rutare conține o singură rută, '' . Acest lucru se rezolvă pentru /blog și indică către BlogComponent. Puteți adăuga mai multe componente și defini acele rute în acest fișier.

De exemplu, dacă doriți să adăugați o componentă care să extragă detalii despre o anumită postare de blog, puteți crea componenta cu această comandă:

ng generate component blog/detail

Aceasta generează componenta pentru detaliul blogului și o adaugă la modulul blogului. Pentru a adăuga o rută pentru aceasta, o puteți adăuga pur și simplu în matricea de rute:

 const routes: Routes = [{ path: '', component: BlogComponent }, {path:"/:title",component: DetailComponent}];

Aceasta adaugă o rută care se rezolvă pentru blog/:title (de exemplu, blog/angular-tutorial ). Această serie de rute este încărcată leneș și nu este inclusă în pachetul inițial.

Verificați încărcare leneră

Puteți verifica cu ușurință dacă încărcarea leneșă funcționează rulând ng serve și observând rezultatul. În partea de jos a rezultatului dvs., ar trebui să obțineți ceva de genul acesta:

Ieșirea de mai sus este împărțită în două părți: Initial Chunk Files sunt fișierele încărcate când pagina se încarcă pentru prima dată. Lazy Chunk Files sunt încărcate leneș. Modulul blog este listat în acest exemplu.

Verificarea încărcării lenere prin jurnalele de rețea de browser

O altă modalitate de a confirma încărcarea leneră este să folosești fila Rețea din panoul Instrumente pentru dezvoltatori al browserului. (Pe Windows, acesta este F12 în Chrome și Microsoft Edge și Ctrl – Shift – I în Firefox. Pe un Mac, acesta este Command – Option – I în Chrome, Firefox și Safari.)

Selectați filtrul JS pentru a vizualiza numai fișierele JavaScript încărcate în rețea. După încărcarea inițială a aplicației, ar trebui să obțineți ceva de genul acesta:

Când navigați la /blog , veți observa că este încărcată o nouă bucată, src_app_blog_blog_module_ts.js . Aceasta înseamnă că modulul dvs. a fost solicitat numai când ați navigat către acea rută și este încărcat leneș. Jurnalul de rețea ar trebui să arate cam așa:

Încărcare leneșă vs încărcare dornică

Pentru comparație, să creăm și un modul încărcat cu nerăbdare și să vedem cum afectează dimensiunea fișierului și timpul de încărcare. Pentru a demonstra acest lucru, veți crea un modul pentru autentificare. Un astfel de modul ar putea avea nevoie să fie încărcat cu nerăbdare, deoarece autentificarea este ceva ce ar putea solicita tuturor utilizatorilor.

Generați un AuthModule rulând această comandă în CLI:

ng generate module auth --routing --module app.module

Aceasta generează modulul și un fișier de rutare. De asemenea, adaugă modulul în fișierul app.module.ts . Cu toate acestea, spre deosebire de comanda pe care am folosit-o pentru a genera un modul data trecută, aceasta nu adaugă o rută încărcată leneș. Folosește parametrul --routing în loc de --route <name> . Asta adaugă modulul de autentificare la matricea de imports din app.module.ts :

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AuthModule //added auth module ], providers: [], bootstrap: [AppComponent] })

Adăugarea AuthModule la matricea dvs. de importuri AppModule înseamnă că modulul de autentificare este adăugat la fișierele inițiale și va fi inclus cu pachetul principal JavaScript. Pentru a verifica acest lucru, puteți rula din nou ng serve și observați rezultatul:

După cum puteți vedea, modulul de autentificare nu este inclus ca parte a fișierelor lazy chunk. În plus, dimensiunea pachetului inițial a crescut. Fișierul main.js aproape și-a dublat dimensiunea, crescând de la 8 KB la 15 KB. În acest exemplu, creșterea este mică, deoarece componentele nu conțin mult cod. Dar, pe măsură ce umpleți componentele cu logică, această dimensiune a fișierului va crește, ceea ce face un argument puternic pentru încărcarea leneșă.

rezumat

Ați învățat cum să utilizați încărcarea leneșă în Angular pentru a prelua module numai atunci când sunt necesare. Încărcarea leneră este o tehnică excelentă pentru a îmbunătăți timpul de încărcare, a reduce utilizarea datelor și a utiliza mai bine resursele de front-end și backend.

Încărcarea leneră, împreună cu tehnologii precum rețelele de distribuție a conținutului și reducerea JavaScript, vor îmbunătăți atât performanța site-ului dvs., cât și satisfacția utilizatorilor dvs.

Dacă dezvoltați un site WordPress și doriți să creșteți cu adevărat viteza, citiți despre Kinsta Edge Caching pentru a vedea câteva cifre impresionante.