Hvordan du dynamisk importerer JavaScript med importkart

Dynamisk import er prosessen med å importere eksterne biblioteker bare når de er påkrevd, og skaper dermed mindre overbelastning på serveren. Dynamisk import er en usedvanlig nyttig funksjon som påvirker optimaliseringen av en webapplikasjon ved å redusere lastetiden og redusere minnet som kreves på serveren.

Dynamisk import på websider gjøres gjennom en funksjon som heter Importer kart. Du skal lære om dynamisk belastning, standard byggeverktøyatferd og bruk av importkart med et trinn-for-trinn-eksempel. La oss komme i gang.

Standard byggverktøyatferd

Som standard, når du kjører en HTML -webside og alle skriptene som er inkludert i den, er det samlet inne i en stor fil. Alle eksterne og interne biblioteker lastes øyeblikkelig inn i minnet (serveren), og mye kompleksitet blir lagt til prosjektet på grunn av å laste inn forskjellige eksterne kodebiter samtidig.

Tidligere var JavaScript -applikasjoner veldig enkle og grunnleggende, men når tiden går, blir applikasjonene mer og mer utfordrende og komplekse, og det er nettopp derfor å laste alle de eksterne bibliotekene samtidig før de trengs er ikke en effektiv løsning. Det er her dynamisk belastning og modularitet av skript er nyttig.

Dynamisk lasting

Som navnet indikerer, er det prosessen med å laste ut eksterne biblioteker og skript bare når de trengs, det vil si på kjøretid. Når det gjelder skriptet til webapplikasjonen, gjøres dynamisk skriptbelastning av en funksjon i ES6 kalt moduler i hvilke skript er delt inn i mindre komponenter. Tilsvarende gjøres import også ved kjøretid ved hjelp av importkart.

For å laste inn import ved kjøretid bruker vi en funksjon som heter Importer kart, Denne funksjonen lar oss overstyre standardprosedyren til byggeverktøyene og lat belastning våre import/biblioteker; lat belastning betyr bare å laste inn når det er nødvendig.

For å demonstrere dynamisk import av eksterne skript på en webside, skal du sette opp en webside som utfører en enkel oppgave, etterpå skal vi importere et eksternt bibliotek/pakke Lodash og bruke funksjonen til å utføre den samme oppgaven

Merk: Du trenger en kodeditor (helst VS -kode) for dette og NodeJS,

Trinn 1: Sette opp en HTML og en skriptfil

For å demonstrere bruk av importkart for dynamisk lasting, krever vi at NodeJs skal installeres på systemet vårt, klikk her for å lese installasjonen av NodeJS.

Opprett en mappe på maskinen din og åpne den mappen med VS -kode (eller ønsket kodeditor) som vist nedenfor:

Inne i mappen, oppretter en HTML -fil som heter hjem.html og en skriptfil som manus.JS:

Vi skal vise noen ord ved å bruke skriptfilen. Så, i HTML -filen, legg til følgende skriptetag.

Merk: Vi bruker type eiendom og sette den lik modul For å varsle nettleseren om at dette er et modulært manus.

Nå, inne i skriptfilen, skriver du inn følgende kodelinjer for å skrive ut tekst til HTML -websiden.

const el = dokument.CreateElement ('P');
const ord = "linux, hint, opplæring!";
const tekst = dokument.createTextNode (ord);
el.vedlegg (tekst);
dokument.kropp.AppendChild (EL);

For å kjøre filen, åpne terminalen til VS -koden og skriv "NPX serverer”, Hvis det er første gang du prøver NPX -serveringskommandoen, kan den installere“tjene”Pakke og be om bekreftelse, og så starter den installasjonen:

Etter det vil NPX Server -kommandoen vise oss hvor er det som er vert for HTML -websiden vår, så klikk på lenken som følger:

Når du åpner lenken http: // localhost: 3000 vil du se følgende utgang:

Trinn 2: Importere eksternt bibliotek

Vi kommer til å importere Startcase metode fra Lodash Bibliotek og bruk denne CarptCase -metoden for å konvertere strengene våre for å "starte saken" -typen ved å bruke følgende kode:

Importer oppstart av '@lodash/startcase';

Merk: Start sakstypen betyr at hvert ord vil ha den første bokstaven i en kapitalsak.

Du kommer til å endre skriptfilen som:

Importer oppstart av "@Lodash/Startcase";
const el = dokument.CreateElement ("P");
const todisplay = "Linux, hint, opplæring!";
const tekst = dokument.CreateTextNode (Startcase (todisplay));
el.vedlegg (tekst);
dokument.kropp.AppendChild (EL);

Som du kan se, er koden litt annerledes, vi passerer Å vise variabel til Startcase funksjon.

Oppdater siden, så ser du følgende feil på utviklerkonsollen din:

Dette er fordi nettleseren ikke vet hva de skal gjøre med denne importuttalelsen i starten av skriptet
fil. Nettleseren prøver å finne Lodash Pakke på den lokale webserveren, dette er også standardatferden til byggeverktøyet. For å endre dette bruker vi importkart i HTML -filer.

Trinn 3: Bruke importkart

Importkart, er en ES6-funksjon, den inneholder et nøkkelverdipar, og nøkkelen er navnet på importen og verdien er plasseringen av importen.

Syntaksen til Importkartet er:

For saken vår legger vi til følgende skriptkode inkludert importkartet:

Merk: Skriptet som inneholder importkartet, må legges til før skriptetoden som inneholder modulær type.

Etter å ha lagt til disse linjene, må du oppdatere websiden din, og du bør se utdataene:

Som du kan se, Startcase Metode konverterte strengordene våre for å "starte saken" -typen. Du inkluderer nå eksterne biblioteker dynamisk, og vi kan undersøke lat lasting i utviklerverktøyene i nettleseren.

Trinn 4: Undersøk lat lasting

Åpne nettleserens utviklerkonsoll og gå over til nettverksfanen.

Under fossen kan du se hvilket skript som lastes på hvilket tidspunkt:

Og herfra kan du tydelig se at alle skriptene ikke ble lastet i starten av, de ble lastet lates mening på kjøretid.

Konklusjon

I JavaScript gjøres dynamisk import av en funksjon som heter Importer kart. Dynamisk import betyr å overstyre standardoppførselen til byggeverktøyene og importere eksterne biblioteker når de er nødvendig ved kjøretid, fordi du noen ganger trenger et bibliotek på bare en del av webapplikasjonen din og ikke de andre. Standard byggverktøy laster alle bibliotekene i en stor fil som vil føre til en økning i minneforbruket. Du har lært hvordan du bruker importkartene til late last eksterne biblioteker med et eksempel og undersøkt det i utviklerkonsollen.