Lat Laddning i Angular (använd detta på din webbplats)

Angular är ett JavaScript-ramverk för frontend. Det har utvecklats av Google för byggande av skalbara webbapplikationer i företagsklass. Vissa av dessa applikationer kan bli ganska stora, vilket påverkar laddningstiden för din applikation.

För att minska laddningstiden och förbättra helhetsupplevelsen för dina användare så kan du använda en teknik som kallas lat laddning. Med denna inbyggda Angular-funktion så kan du först ladda endast de nödvändiga delarna av webbapplikationen och sedan ladda andra moduler efter behov.

I den här artikeln så kommer du att lära dig mer om lat laddning och hur den kan bidra till att snabba upp din webbapplikation.

Vad är lat laddning?

Lat laddning är en teknik där webbsidans element endast laddas när de behövs. Dess motsvarighet är ivrig laddning när allt laddas – eller försöker laddas – omedelbart. Att hämta alla bilder, videor, CSS och JavaScript-kod ivrigt kan innebära långa laddningstider – dåliga nyheter för användarna.

Lat laddning används ofta för bilder och videor på webbplatser med mycket innehåll. Om man laddar alla medier på en gång så används mycket bandbredd och sidvisningarna fördröjs. I lat laddning så laddas dessa element när deras plats på sidan är på väg att rullas in.

Angular är ett ramverk för enstaka sidor som bygger på JavaScript för en stor del av sin funktionalitet. Din applikations samling av JavaScript kan lätt bli stor när appen växer, och detta innebär en motsvarande ökning av dataanvändning och laddningstid. För att snabba upp saker och ting så kan du använda lat laddning för att först hämta nödvändiga moduler och skjuta upp laddningen av andra moduler tills de behövs.

Fördelar med lat laddning i Angular

Lat laddning erbjuder fördelar som gör din webbplats mer användarvänlig. Dessa inkluderar:

• Snabbare laddningstid: JavaScript inkluderar instruktioner för att visa din sida och ladda dess data. På grund av detta så är det en resurs som blockerar rendering. Det innebär att webbläsaren måste vänta på att ladda in all JavaScript innan sidan visas. Vid lat laddning i Angular så delas JavaScript upp i delar som laddas separat. Den första biten innehåller endast den logik som behövs för sidans huvudmodul. Den laddas ivrigt, och de återstående modulerna via lat laddning. Genom att minska storleken på den inledande biten så laddas och renderas sidan snabbare.
• Mindre dataanvändning: Genom att dela upp data i bitar och ladda vid behov så kan du använda mindre bandbredd.
• Bevarade webbläsarresurser: Eftersom webbläsaren endast laddar de delar som behövs så slösar den inte bort minne och processor på att tolka och återge kod som inte behövs.

Implementering av lat laddning i Angular

För att följa med i den här handledningen så behöver du följande:

• NodeJS installerat
• Grundläggande kunskaper om Angular

Uppdatera ditt projekt

Du kommer att använda Angular CLI för att skapa ditt projekt. Du kan installera CLI med hjälp av npm genom att köra kommandot:

npm install -g @angular/cli

Därefter så skapar du ett projekt som heter Lat Laddning Demo på följande sätt:

ng new lazy-loading-demo --routing

Detta kommando skapar ett nytt Angular-projekt, komplett med routing. Du kommer att arbeta uteslutande i mappen src/app, som innehåller koden för din app. Denna mapp inkluderar din huvudsakliga routing-fil, app-routing.module.ts. Strukturen i mappen bör se ut så här:

Skapa en funktionsmodul med routar

Därefter så ska du skapa en funktionsmodul som kommer att laddas långsamt. För att skapa den här modulen så kör du det här kommandot:

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

Det här kommandot skapar en modul som heter BlogModule, tillsammans med routing. Om du öppnar src/app/app-routing.module.ts så ser den ut så här:

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 { } 

Den del som är viktig för latheten är den tredje raden:

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

På den raden definieras routerna. Routen för bloggen använder argumentet loadChildren i stället för component. Argumentet loadChildren talar om för Angular att lat laddning ska ladda routen. Det vill säga att importera modulen dynamiskt endast när routen besöks, och sedan returnera den till routen. Modulen definierar sina egna underordnade router, t.ex. blog/**, i filen routing.module.ts. Bloggmodulen som du genererade ser ut så här:

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 { }

Du kommer att märka att den här routing-filen innehåller en enda route, ''. Den här routen är /blog och riktas mot BlogComponent. Du kan lägga till fler komponenter och definiera dessa router i den här filen.

Om du exempelvis vill lägga till en komponent som hämtar information om ett visst blogginlägg så kan du skapa komponenten med det här kommandot:

ng generate component blog/detail

Det skapar komponenten för blogginformationen och lägger till den i blogmodulen. Om du vill lägga till en route för den så kan du helt enkelt lägga till den i din route-matris:

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

Detta lägger till en route som löser upp för blog/:title (till exempel blog/angular-tutorial). Den här matrisen med router är lat laddad och ingår inte i det ursprungliga paketet.

Verifiera lat laddning

Du kan enkelt kontrollera att lat laddning fungerar genom att köra ng serve och observera resultatet. Längst ner i utmatningen så bör du få något som liknar detta:

Utmatningen ovan är uppdelad i två delar: Initial Chunk Files är de filer som laddas när sidan laddas första gången. Lazy Chunk Filesär lat laddad. Bloggmodulen är listad i det här exemplet.

Kontroll av lat laddning med hjälp av webbläsarens nätverksloggar

Ett annat sätt att bekräfta lat laddning är att använda fliken Nätverk i webbläsarens panel Utvecklingsverktyg. (I Windows är det F12 för Chrome och Microsoft Edge och Ctrl–Shift–I för Firefox. På Mac är det Command–Option–I för Chrome, Firefox och Safari)

Välj filtret JS för att endast visa JavaScript-filer som laddats via nätverket. Efter den första laddningen av appen så bör du få något liknande:

När du navigerar till /blog så kommer du att märka att en ny del, src_app_blog_blog_module_ts.js, har laddats. Det betyder att din modul endast begärdes när du navigerade till den routen och att den nyttjar lat laddning. Nätverksloggen bör se ut ungefär så här:

Lat laddning vs ivrig laddning

Som en jämförelse så kan vi även skapa en modul som laddas ivrigt och se hur detta påverkar filstorleken och laddningstiden. För att demonstrera detta så skapar du en modul för autentisering. En sådan modul kan behöva laddas ivrigt, eftersom autentisering är något som du kanske kräver att alla användare ska göra.

Generera en AuthModule genom att köra det här kommandot i CLI:

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

Det genererar modulen och en routing-fil. Modulen läggs även till i filen app.module.ts. Till skillnad från kommandot som vi använde för att generera en modul förra gången, lägger det här kommandot dock inte till någon latladdad route. Den använder parametern --routing i stället för --route <name>. Därmed så läggs autentiseringsmodulen till imports-matrisen i app.module.ts:

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

Om du lägger till AuthModule i matrisen AppModule imports så läggs autentiseringsmodulen till i de inledande filerna och kommer att inkluderas i JavaScript-huvudpaketet. För att verifiera detta så kan du köra ng serve igen och observera resultatet:

Som du kan se är autentiseringsmodulen inte inkluderad som en del av de latladdade filerna. Storleken på det ursprungliga paketet har dessutom ökat. Filen main.js har nästan fördubblats i storlek, från 8 KB till 15 KB. I det här exemplet är ökningen liten eftersom komponenterna inte innehåller så mycket kod. Men när du fyller komponenterna med logik så kommer denna filstorlek att öka, vilket är ett starkt argument för lat laddning.

Sammanfattning

Nu har du lärt dig hur du använder lat laddning i Angular för att endast hämta moduler när de behövs. Lat laddning är en bra teknik för att förbättra laddningstiderna, minska dataanvändningen och utnyttja dina frontend- och backend-resurser på ett bättre sätt.

Lat laddning, tillsammans med teknik som innehållsdistribueringsnätverk och minifiering av JavaScript, kommer både att förbättra webbplatsens prestanda och användarnas tillfredsställelse.

Om du utvecklar en WordPress-webbplats och verkligen vill öka hastigheten så kan du läsa om Kinsta’s Edge Caching för att se några imponerande siffror.

Michael Nyamande

A digital product manager by day, Michael is a tech enthusiast who is always tinkering with different technologies. His interests include web and mobile frameworks, NoCode development, and blockchain development.