Alt hvad du behøver at vide om opdeling af JavaScript-kode

Opdeling af JavaScript-kode

Moderne websteder kombinerer ofte al deres JavaScript i en enkelt, stor main.js manuskript. Dette indeholder regelmæssigt scripts til alle dine sider eller ruter, selvom brugere kun har brug for en lille del til den side, de ser på.

macbook pro 13 tommer bæretaske

Når JavaScript serveres på denne måde, kan indlæsningsydelsen på dine websider lide - især med responsivt webdesign på mobile enheder. Så lad os ordne det ved at implementere JavaScript-kodedeling.



  • Sådan kode hurtigere, lettere JavaScript

Hvilket problem løser kodedeling?

Når en webbrowser ser en det skal bruge tid på at downloade og behandle det JavaScript, du henviser til. Dette kan føles hurtigt på avancerede enheder, men indlæsning, parsing og udførelse af ubrugt JavaScript-kode kan tage et stykke tid i gennemsnit mobile enheder med et langsommere netværk og langsommere CPU. Hvis du nogensinde har været nødt til at logge på kaffebar eller hotel-WiFi, ved du, at langsomme netværksoplevelser kan ske for alle.



Hvert sekund, der bruges på at vente på JavaScript for at afslutte opstarten, kan forsinke, hvor hurtigt brugere er i stand til at interagere med din oplevelse. Dette er især tilfældet, hvis din UX er afhængig af JS til kritiske komponenter eller endda bare vedhæfter begivenhedshåndterere til enkle stykker brugergrænseflade.

Har jeg brug for at gider med kodedeling?

Det er bestemt værd at spørge dig selv, om du har brug for kodedeling (hvis du har brugt en simpel webstedsbygger du sandsynligvis ikke). Hvis dit websted kræver JavaScript til interaktivt indhold (til funktioner som menuskuffer og karruseller) eller er en applikation på en enkelt side, der er afhængig af JavaScript-rammer for at gengive brugergrænsefladen, er svaret sandsynligvis 'ja'. Om kodedeling er umagen værd for dit websted, er et spørgsmål, du bliver nødt til at besvare selv. Du forstår din arkitektur, og hvordan dit websted indlæses bedst. Heldigvis er der værktøjer til rådighed, der kan hjælpe dig her. Husk, at hvis du implementerer ændringer på tværs af dit designsystem, skal du gemme disse ændringer i din delte Sky lagring så dit team kan se.



Få hjælp

For de nye til JavaScript-kodedeling, Fyrtårn - panelet Audits i Chrome Developer Tools - kan hjælpe med at skinne et lys over, om dette er et problem for dit websted. Den revision, du vil se efter, er Reducer JavaScript-udførelsestid (dokumenteret her ). Denne revision fremhæver alle de scripts på din side, der kan forsinke en bruger, der interagerer med den.

PageSpeed ​​Insights er et online-værktøj, der også kan fremhæve dit websteds ydeevne - og inkluderer laboratoriedata fra Lighthouse og virkelige data om dit webstedsydelse fra Chrome User Experience Report. Jeres webhosting tjenesten kan have andre muligheder.

Kodedækning i Chrome Developer Tools

Hvis det ser ud til, at du har dyre scripts, der bedre kan opdeles, er det næste værktøj, du skal se på, kodedækningsfunktionen i Chrome Developer Tools (DevTools> menu øverst til højre> Flere værktøjer> Dækning). Dette måler, hvor meget ubrugt JavaScript (og CSS) er på din side. For hvert opsummerede script viser DevTools de 'ubrugte bytes'. Dette er kode, du kan overveje at opdele og dove-loading, når brugeren har brug for det.



De forskellige typer kodedeling

Der er et par forskellige tilgange, du kan tage, når det kommer til kodedeling af JavaScript. Hvor meget disse gælder for dit websted har en tendens til at variere afhængigt af om du vil opdele side / applikations 'logik' eller opdele biblioteker / rammer fra andre 'leverandører'.

Opdeling af dynamisk kode: Mange af os importerer 'statisk' JavaScript-moduler og afhængigheder, så de er samlet i en fil ved byggetid. 'Dynamisk' kodedeling tilføjer muligheden for at definere punkter i din JavaScript, som du gerne vil opdele og dovne ind efter behov. Moderne JavaScript bruger dynamikken importere() erklæring for at opnå dette. Vi dækker dette mere snart.

Opdeling af leverandørkode: De rammer og biblioteker, du stoler på (f.eks. React, Angular, Vue eller Lodash), ændres sandsynligvis ikke i de scripts, du sender ned til dine brugere, ofte som 'logikken' for dit websted. For at reducere den negative indvirkning af cache-ugyldighed for brugere, der vender tilbage til dit websted, kan du opdele dine 'leverandører' i et separat script.

Opdeling af indgangskode: Indlæg er udgangspunkt i dit websted eller din app, som et værktøj som Webpack kan se på for at opbygge dit afhængighedstræ. Opdeling efter poster er nyttigt for sider, hvor routing på klientsiden ikke bruges, eller hvis du stoler på en kombination af server- og klientsidesgengivelse.

Til vores formål i denne artikel vil vi koncentrere os om dynamisk kodedeling.

Få hænderne på med kodedeling

Lad os optimere JavaScript-ydeevnen for en enkel applikation, der sorterer tre tal gennem kodedeling - dette er en app af min kollega Houssein Djirdeh. Den arbejdsgang, vi bruger til at få vores JavaScript til at indlæse hurtigt, er måling, optimering og overvågning. Start her .

Mål ydelse

Før vi forsøger at tilføje optimeringer, skal vi først måle effektiviteten af ​​vores JavaScript. Da den magiske sorteringsapp er hostet på Glitch, bruger vi dens kodningsmiljø. Sådan gør du:

  • Klik på knappen Vis live.
  • Åbn DevTools ved at trykke på CMD + OPTION + i / CTRL + SHIFT + i.
  • Vælg Netværkspanel.
  • Sørg for, at Deaktiver cache er markeret, og genindlæs appen.

Denne enkle applikation ser ud til at bruge 71,2 KB JavaScript bare for at sortere nogle få numre. Det virker bestemt ikke rigtigt. I vores kilde src / index.js , Lodash-hjælpebiblioteket er importeret, og vi bruger det Sorter efter - et af dets sorteringsværktøjer - for at sortere vores numre. Lodash tilbyder flere nyttige funktioner, men appen bruger kun en enkelt metode fra den. Det er en almindelig fejl at installere og importere al tredjepartsafhængighed, når du faktisk kun behøver at bruge en lille del af den.

Optimer din pakke

Der er nogle få muligheder for at trimme vores JavaScript-bundtstørrelse:

  1. Skriv en tilpasset sorteringsmetode i stedet for at stole på et tredjepartsbibliotek.
  2. Brug Array.prototype.sort () , som er indbygget i browseren.
  3. Importer kun Sorter efter metode fra Lodash i stedet for hele biblioteket.
  4. Download kun koden til sortering, når en bruger har brug for den (når de klikker på en knap).

Valgmuligheder 1 og 2 er passende til at reducere vores bundtstørrelse - disse giver sandsynligvis mening for en reel applikation. Til undervisningsformål skal vi prøve noget andet. Valgmuligheder 3 og 4 hjælper med at forbedre applikationens ydeevne.

Importer kun den kode, du har brug for

Vi ændrer et par filer for kun at importere singlen Sorter efter metode, vi har brug for fra Lodash. Lad os starte med at erstatte vores lodash afhængighed i pakke.json :

'lodash': '^4.7.0',

med dette:

'lodash.sortby': '^4.7.0',

I src / index.js importerer vi dette mere specifikke modul:

js import './style.css'; import _ from 'lodash'; import sortBy from 'lodash.sortby';

Dernæst opdaterer vi, hvordan værdierne sorteres:

Sonic the Hedgehog 25-års jubilæet
js form.addEventListener('submit', e => { e.preventDefault(); const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber]; const sortedValues = _.sortBy(values); const sortedValues = sortBy(values); results.innerHTML = `

${sortedValues}

` });

Genindlæs app'en magiske numre, åbn udviklerværktøjer og se på netværkspanelet igen. For denne specifikke app blev vores bundtstørrelse reduceret med en skala på fire med lidt arbejde. Men der er stadig meget plads til forbedringer.

Opdeling af JavaScript-kode

Webpack er en af ​​de mest populære JavaScript-modulbundlere, der bruges af webudviklere i dag. Det 'bundter' (kombinerer) alle dine JavaScript-moduler og andre aktiver i statiske filer, som browsere kan læse.

Den enkelte pakke i denne applikation kan opdeles i to separate scripts:

  • Den ene er ansvarlig for kode, der udgør den oprindelige rute.
  • En anden indeholder vores sorteringskode.

Brug af dynamisk import (med importere() nøgleord), kan et andet script læsses om efter behov. I vores magiske tal-app kan koden, der udgør scriptet, indlæses efter behov, når brugeren klikker på knappen. Vi begynder med at fjerne importen på øverste niveau for sorteringsmetoden i src / index.js :

import sortBy from 'lodash.sortby';

Importer det til begivenhedslytteren, der udløses, når der klikkes på knappen:

hvordan man tegner en kat bagfra
form.addEventListener('submit', e => { e.preventDefault(); import('lodash.sortby') .then(module => module.default) .then(sortInput()) .catch(err => { alert(err) }); });

Denne dynamik importere() den funktion, vi bruger, er en del af et standardstrack-forslag til inkludering af muligheden for dynamisk at importere et modul i JavaScript-sprogstandarden. Webpack understøtter allerede denne syntaks. Du kan læse mere om, hvordan dynamisk import fungerer i denne artikel .

Det importere() erklæring returnerer et løfte, når det løser sig. Webpack betragter dette som et splitpunkt, hvor det bryder ud i et separat script (eller klump). Når modulet er returneret, module.default bruges til at henvise til den standardeksport, der leveres af lodash . Løftet er lænket med en anden .derefter() kalder en sortInput metode til at sortere de tre inputværdier. I slutningen af ​​Promise-kæden .fangst() opfordres til at håndtere, hvor løftet afvises som følge af en fejl.

I ægte produktionsapplikationer skal du håndtere dynamiske importfejl korrekt. Enkle advarselsmeddelelser (svarende til hvad der bruges her) er, hvad der bruges og muligvis ikke giver den bedste brugeroplevelse for at fortælle brugerne, at noget er gået galt.

Hvis du ser en fnugfejl som 'Parsefejl: import og eksport vises muligvis kun på det øverste niveau', skal du vide, at dette skyldes, at den dynamiske importsyntaks endnu ikke er afsluttet. Selvom Webpack understøtter det, er indstillingerne for ESLint (et JavaScript-linting-værktøj), der bruges af Glitch, ikke blevet opdateret til at omfatte denne syntaks endnu, men det fungerer stadig.

Den sidste ting, vi skal gøre, er at skrive sortInput metode i slutningen af ​​vores fil. Dette skal være en funktion, der returnerer en funktion, der tager den importerede metode fra lodash.sortBy . Den indlejrede funktion kan sortere de tre inputværdier og opdatere DOM:

const sortInput = () => { return (sortBy) => { const values = [ input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber ]; const sortedValues = sortBy(values); results.innerHTML = `

${sortedValues}

` }; }

Overvåg numrene

Lad os nu genindlæse applikationen en sidste gang og holde øje med netværkspanelet. Du skal bemærke, hvordan kun en lille indledende pakke downloades, når appen indlæses. Når der er klikket på knappen for at sortere inputnumrene, hentes og udføres scriptet / klumpen, der indeholder sorteringskoden. Kan du se, hvordan tallene stadig bliver sorteret, som vi ville forvente, at de skulle?

Opdeling af JavaScript-kode og dovenindlæsning kan være meget nyttigt til at trimme den oprindelige bundtstørrelse på din app eller dit websted. Dette kan direkte resultere i hurtigere sideindlæsningstider for brugerne. Selvom vi har set på at tilføje kodedeling til en vanilje-JavaScript-applikation, kan du også anvende den på apps bygget med biblioteker eller rammer.

Lazy-loading med et JavaScript-bibliotek eller en ramme

Mange populære rammer understøtter tilføjelse af kodedeling og dovenindlæsning ved hjælp af dynamisk import og Webpack.

Her er hvordan du kan lade en film 'beskrivelse' komponent ved hjælp af React (med React.lazy () og deres Suspense-funktion) til at give et 'Loading ...' tilbagefald, mens komponenten lægges i doven (se her for flere detaljer):

import React, { Suspense } from 'react'; const Description = React.lazy(() => import('./Description')); function App() { return (

My Movie

); }

Kodedeling kan hjælpe med at reducere effekten af ​​JavaScript på din brugeroplevelse. Overvej det bestemt, hvis du har større JavaScript-bundter, og hvis du er i tvivl, så glem ikke at måle, optimere og overvåge.

Denne artikel blev oprindeligt offentliggjort i nummer 317 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb nummer 317 her eller abonner her .



Relaterede artikler: