Alt du trenger å vite om JavaScript-kode Splitting

Moderne nettsteder kombinerer ofte alt sitt JavaScript i en enkelt, stor main.js. manus. Dette inneholder jevnlig skript for alle sidene dine eller ruter, selv om brukerne bare trenger en liten del for siden de ser på.

Når JavaScript serveres på denne måten, kan lastingens ytelse på websidene dine lide - spesielt med Responsivt webdesign på mobile enheter. Så la oss fikse det ved å implementere JavaScript-koden som splittes.

• Hvordan kode raskere, lettere javascript

Hvilket problem løser koden som løser?

Når en nettleser ser en & lt; script & gt; Det må bruke tid på å laste ned og behandle JavaScript du refererer til. Dette kan føles raskt på high-end-enheter, men lasting, parsing og utførelse av ubrukt JavaScript-kode kan ta en stund på gjennomsnittlige mobile enheter med et langsommere nettverk og langsommere CPU. Hvis du noen gang har hatt å logge på kaffebutikk eller hotell WiFi, vet du at sakte nettverksopplevelser kan skje med alle.

Hver andre brukt venter på JavaScript for å fullføre oppstart kan forsinke hvor snart brukerne kan samhandle med din erfaring. Dette er spesielt tilfelle hvis UX er avhengig av JS for kritiske komponenter eller til og med bare å feste hendelseshåndterere for enkle deler av UI.

Trenger jeg å bry meg med kode splitting?

Det er definitivt verdt å spørre deg selv om du trenger å kode-splittet (hvis du har brukt en enkel Nettstedbygger du sannsynligvis ikke). Hvis nettstedet ditt krever JavaScript for interaktivt innhold (for funksjoner som meny skuffer og karuseller) eller er et enkelt-siders program som stole på JavaScript-rammer for å gjengi brukergrensesnitt, er svaret sannsynligvis "ja". Enten kode splitting er verdt for nettstedet ditt er et spørsmål du må svare deg selv. Du forstår arkitekturen din og hvordan nettstedet ditt laster best. Heldigvis er det verktøy tilgjengelig for å hjelpe deg her. Husk at hvis du implementerer endringer på tvers av designsystemet, lagre disse endringene i din delte skylagring så laget ditt kan se.

Få hjelp

For de nye til Javascript-koden, splitting, fyr - Revisjonspanelet i Chrome Developer Tools - kan bidra til å skinne et lys om hvorvidt dette er et problem for nettstedet ditt. Revisjonen du vil lete etter er å redusere JavaScript-kjøretid (dokumentert her ). Denne revisjonen fremhever alle skriptene på siden din som kan forsinke en bruker som samhandler med den.

PagesPeed Insights. er et elektronisk verktøy som også kan markere nettstedets ytelse - og inkluderer laboratoriedata fra fyrtårn og virkelige data på nettstedets ytelse fra Chrome-brukeropplevelsesrapporten. Din Web Hosting. Tjenesten kan ha andre alternativer.

Kodedekning i Chrome Developer Tools

Hvis det ser ut til at du har kostbare skript som kan være bedre splittet, er det neste verktøyet å se på er kodedekningsfunksjonen i Chrome-utviklerverktøyene (Devtools & GT, øverst til høyre meny og GT; flere verktøy og GT; dekning). Dette måler hvor mye ubrukt javascript (og CSS) er på siden din. For hvert skript som er oppsummert, vil DevTools vise de "ubrukte bytes". Dette er koden du kan vurdere å splitte ut og latede lasting når brukeren trenger det.

De forskjellige typer kode splitting

Det er noen forskjellige tilnærminger du kan ta når det gjelder kode som splitter Javascript. Hvor mye gjelder disse på nettstedet ditt, har en tendens til å variere avhengig av om du ønsker å dele opp Side / Application 'Logic' eller splittede biblioteker / rammer fra andre "leverandører".

Dynamisk kode splitting: Mange av oss 'statelig' Importer Javascript-moduler og avhengigheter slik at de er sammen med en fil på byggetiden. 'Dynamisk' kode Splitting legger til evnen til å definere poeng i JavaScript at du vil dele og lat-belastning etter behov. Moderne JavaScript bruker dynamikken import() uttalelse for å oppnå dette. Vi dekker dette mer kort tid.

Leverandørkode Splitting: Rammene og bibliotekene du stoler på (f.eks. React, vinkel, Vue eller Lodash) er usannsynlig å endre seg i skriptene du sender ned til brukerne, ofte som "logikken" for nettstedet ditt. For å redusere den negative effekten av cache-ugyldighet for brukere som returnerer til nettstedet ditt, kan du dele dine leverandører til et eget skript.

Entry-Point Code Splitting: Oppføringer starter poeng på nettstedet ditt eller appen som et verktøy som WebPack kan se på å bygge opp avhengighetstreet. Splitting av oppføringer er nyttig for sider hvor klient-side ruting ikke brukes, eller du stoler på en kombinasjon av server og klientsiden gjengivelse.

For våre formål i denne artikkelen, vil vi konsentrere oss om dynamisk kode splitting.

Få hendene på med kode splitting

La oss optimalisere JavaScript-ytelsen til a Enkelt program som sorterer tre tall Gjennom kode splitting - dette er en app av min kollega houssein djirdh. Arbeidsflyten vi skal bruke for å få vår JavaScript-last raskt, måler, optimalisere og overvåke. Start her .

Måle ytelsen

Før du forsøker å legge til noen optimaliseringer, går vi først for å måle ytelsen til JavaScript. Som Magic Sorter-appen er vert for feil, bruker vi dets kodemiljø. Slik går du om det:

• Klikk på Vis Live-knappen.
• Åpne DevTools ved å trykke på CMD + Alternativ + I / Ctrl + Shift + I.
• Velg nettverkspanelet.
• Pass på at deaktiver cachen er sjekket og last på nytt.

Denne enkle applikasjonen ser ut til å bruke 71,2 kb JavaScript bare for å sortere gjennom noen få tall. Det virker absolutt ikke riktig. I vår kilde src / index.js. , Lodash Utility Library er importert og vi bruker Sorter etter - En av sorteringsverktøyene - for å sortere våre tall. Lodash tilbyr flere nyttige funksjoner, men appen bruker bare en enkelt metode fra den. Det er en vanlig feil å installere og importere alle en tredjepartsavhengighet når du faktisk bare trenger å bruke en liten del av det.

Optimaliser bunten din

Det finnes noen få alternativer for å trimme vår JavaScript-buntstørrelse:

1. Skriv en tilpasset sorteringsmetode i stedet for å stole på et tredjeparts bibliotek.
2. Bruk Array.prototype.sort () , som er bygd inn i nettleseren.
3. Bare importerer den Sorter etter Metode fra Lodash i stedet for hele biblioteket.
4. Bare last ned koden for sortering når en bruker trenger den (når de klikker på en knapp).

Alternativer 1 og 2 er egnede for å redusere buntstørrelsen - disse er sannsynligvis fornuftig for en ekte applikasjon. For undervisningsformål skal vi prøve noe annerledes. Alternativer 3 og 4 bidrar til å forbedre ytelsen til søknaden.

Bare importer koden du trenger

Vi vil endre noen filer for å bare importere singelen Sorter etter Metode vi trenger fra Lodash. La oss begynne med å erstatte vår Lodash. avhengighet i. pakke.json. :

"lodash": "^4.7.0",

med dette:

"lodash.sortby": "^4.7.0",

I SRC / Index.js importerer vi denne mer spesifikke modulen:

 js
importere "./style.css";
Import _ fra "Lodash";
Import Sortby fra "Lodash.sortby"; 

Deretter oppdaterer vi hvordan verdiene blir sortert:

 js
form.addeventlistener ("send", e = & gt; {
  e.preventdefault ();
  constverdier = [input1.valueassumber, input2.valueassumber, input3.valuEasNumber];
  cond sorteringValues ​​= _.sortby (verdier);
  cond sorteringValues ​​= sortby (verdier);
  results.innerhtml = `.
    & lt; h2 & gt;
      $ {sorteredvalues}
    lt; / h2 & gt;
  `.
}); 

Oppdater Magic Numbers-appen, åpne utviklerverktøy og se på nettverkspanelet igjen. For denne spesifikke appen ble vår buntstørrelse redusert med en skala på fire med lite arbeid. Men det er fortsatt mye rom for forbedring.

Javascript-kode splitting.

WebPack er en av de mest populære JavaScript-modulbundlene som brukes av webutviklere i dag. Det 'bunter' (kombinerer) alle dine JavaScript-moduler og andre eiendeler i statiske filer nettlesere kan lese.

Single-bunten i denne applikasjonen kan deles i to separate skript:

• Den ene er ansvarlig for koden som utgjør den opprinnelige ruten.
• En annen inneholder vår sorteringskode.

Bruker dynamisk import (med import() Søkeord), et annet skript kan være lat-lastet på forespørsel. I vår Magic Numbers-app kan koden som gjør opp skriptet lastes etter behov når brukeren klikker på knappen. Vi begynner med å fjerne toppnivåimporten for sorteringsmetoden i src / index.js. :

 Import Sortby fra "Lodash.sortby"; 

Importer det i hendelsestøtten som brenner når knappen klikkes:

form.addeventlistener ("send", e = & gt; {
  e.preventdefault ();
  Import ('Lodash.sortby')
    .Den (modul = & gt; modul.default)
    .Then (sortinput ())
    .Catch (err = & gt; {Alert (Err)});
});

Denne dynamikken import() Funksjon Vi bruker er en del av et standardstrips forslag for å inkludere muligheten til å dynamisk importere en modul i JavaScript-språkstandarden. WebPack støtter allerede denne syntaksen. Du kan lese mer om hvordan dynamisk import fungerer i denne artikkelen .

De import() uttalelsen returnerer et løfte når det løses. WebPack anser dette som et delt punkt som det vil bryte ut i et eget skript (eller klump). Når modulen returneres, modul.default. brukes til å referere til standardeksporten levert av Lodash. . Løftet er kjedet med en annen .deretter() ringer A. SortInput. Metode for å sortere de tre inngangsverdiene. På slutten av løftekjeden, .å fange() kalles for å håndtere hvor løftet avvises som følge av en feil.

I en ekte produksjonsapplikasjoner bør du håndtere dynamiske importfeil på riktig måte. Enkle varslingsmeldinger (ligner på det som brukes her) er det som brukes, og kan ikke gi den beste brukeropplevelsen for å la brukerne vite at noe har gått galt.

Hvis du ser en lintingfeil som "Parsing-feil: Import og eksport kan bare vises på toppnivået", vet at dette skyldes den dynamiske importsyntaxen som ennå ikke er ferdigstillet. Selv om WebPack støtter den, har innstillingene for ESLINT (et JavaScript-lintingsverktøy) som brukes av feil, ikke blitt oppdatert for å inkludere denne syntaksen ennå, men det virker fortsatt.

Det siste vi trenger å gjøre er å skrive SortInput. metode på slutten av filen vår. Dette må være en funksjon som returnerer en funksjon som tar i den importerte metoden fra Lodash.Sortby. . Den nestede funksjonen kan sortere de tre inngangsverdiene og oppdatere DOM:

 const sortinput = () = & gt; {
  returnere (sortby) = & gt; {
    cond-verdier = [
      INPUT1.VALUEASNUMMER,
      INPUT2.VALUEASNUMMER,
      INPUT3.VALUEASNUMMER
    ];
    cond sorteringValues ​​= sortby (verdier);
    results.innerhtml = `.
      & lt; h2 & gt;
        $ {sorteredvalues}
      lt; / h2 & gt;
    `.
  };
} 

Overvåk tallene

La oss nå laste på nytt søknaden en siste gang og holde øye med nettverkspanelet. Du bør legge merke til hvordan bare en liten startpakke lastes ned når appen laster. Etter at knappen er klikket for å sortere inntastingsnumrene, blir skriptet / stykket som inneholder sorteringskoden hentes og utføres. Ser du hvordan tallene fortsatt blir sortert som vi forventer at de skal?

Javascript-koden Splitting og Lazy-loading kan være svært nyttig for å trimme ned den første buntstørrelsen på appen din eller nettstedet ditt. Dette kan direkte resultere i raskere sidebelastningstider for brukere. Selv om vi har sett på å legge til kode som splitter til et vanilje JavaScript-program, kan du også bruke den til apper bygget med biblioteker eller rammer.

Lazy-loading med et Javascript-bibliotek eller rammeverk

Mange populære rammer støtter å legge til kode splitting og lat-loading ved hjelp av dynamisk import og webpack.

Her er hvordan du kan lazy-laste en film 'beskrivelse' komponent ved hjelp av reagere (med React.lazy () og deres spenningsfunksjon) for å gi en "loading ..." Fallback mens komponenten blir lat-lastet i (se her For noen flere detaljer):

 Importer reagerer, {suspensjon} fra "reagert";
const beskrivelse = reagere.lazy (() = & gt; import ('./ beskrivelse'));
Funksjonsapp () {
  komme tilbake (
    & lt; div & gt;
      & lt; h1 & gt; min film & lt; / h1 & gt;
      & lt; Suspense fallback = "loading ..." & gt;
        & lt; beskrivelse / & gt;
      & lt; / suspense & gt;
    & lt; / div & gt;
  );
} 

Kode Splitting kan bidra til å redusere effekten av JavaScript på din brukeropplevelse. Absolutt vurdere det hvis du har større JavaScript-bunter, og når du er i tvil, ikke glem å måle, optimalisere og overvåke.

Denne artikkelen ble opprinnelig publisert i utgave 317 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 317 her eller Abonner her .

Relaterte artikler:

• 9 av de beste JavaScript-rammene
• 15 Essential JavaScript-verktøy du bør bruke
• 14 av de beste JavaScript-APIene