Alt du behøver at vide om JavaScript-koden opdeling

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

Når JavaScript serveres på denne måde, kan indlæsningsydelsen på dine websider lide - især med Responsive Web Design på mobile enheder. Så lad os rette det ved at implementere JavaScript Code Splitting.

• HVORDAN DO KODE HOFTASTER, LIGHTER JAVASCRIPT

Hvilket problem løser koden løsning?

Når en webbrowser ser en & lt; script & gt; Det skal bruge tid på at downloade og behandle javascript, du refererer til. Dette kan føle sig hurtigt på high-end enheder, men indlæsning, parsing og udførelse af ubrugt JavaScript-kode kan tage et stykke tid på gennemsnitlige 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, kender du langsomme netværksoplevelser kan ske for alle.

Hvert sekund brugt til at vente på JavaScript for at afslutte opstart, kan forsinke, hvor hurtigt brugere kan interagere med din oplevelse. Dette er især tilfældet, hvis din UX er afhængig af JS for kritiske komponenter eller endda bare vedhæftet hændelseshåndterer til enkle stykker af UI.

Skal jeg forstyrre med kodeopdeling?

Det er absolut værd at spørge dig selv, om du skal kode-Split (hvis du har brugt en simpel Website Builder. Du gør det nok ikke). Hvis dit websted kræver JavaScript for interaktivt indhold (for funktioner som menu skuffer og karruseller) eller er en enkeltsideprogram, der stoler på JavaScript-rammer for at gøre UI, er svaret sandsynligvis 'Ja'. Om kodeopdeling er umagen værd for dit websted er et spørgsmål, du skal svare dig selv. Du forstår din arkitektur og hvordan dit websted læser bedst. Heldigvis er der værktøjer til rådighed for at 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 hold kan se.

Få hjælp

For de nye til JavaScript-kodeopdeling, Fyrtårn - Revisionspanelet i Chrome Developer Tools - kan hjælpe med at skinne et lys om, hvorvidt dette er et problem for dit websted. Den revision, du vil søge efter, er at reducere JavaScript-eksekveringstiden (dokumenteret her ). Denne revision fremhæver alle 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 indeholder lab-data fra fyrtårn og real-world-data på dit webstedsydelse fra Chrome User Experience-rapporten. Jeres Web Hosting. Tjenesten kan have andre muligheder.

Kode dækning i Chrome Developer Tools

Hvis det ser ud til at du har dyre scripts, der kunne være bedre opdelt, er det næste værktøj til at se på kodedækningsfunktionen i Chrome Developer Tools (Devtools & GT; top-højre menu & GT; flere værktøjer og gt; dækning). Dette måler, hvor meget ubrugt javascript (og CSS) er på din side. For hvert script opsummeret vil Devtools vise de 'ubrugte byte'. Dette er kode, du kan overveje at splitte ud og lazy-loading, når brugeren har brug for det.

De forskellige slags kode opdeling

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

Dynamisk kode Splitting: Mange af os 'statisk' importerer javascript moduler og afhængigheder, så de er bundtet sammen i en fil på byggetid. 'Dynamic' Code Splitting tilføjer evnen til at definere point i javascript, som du gerne vil opdele og doven-belastning efter behov. Moderne JavaScript bruger dynamikken importere() erklæring for at opnå dette. Vi dækker dette mere kort tid.

Leverandørkode Splitting: Rammerne og bibliotekerne, du stoler på (fx reagerer, vinkel, vue eller lodash), er usandsynligt, at du ændrer sig i de scripts, du sender ned til dine brugere, ofte som 'Logic' for dit websted. For at reducere den negative effekt af cache-ugyldighed for brugere, der vender tilbage til dit websted, kan du opdele dine 'leverandører' i et separat script.

Entry-Point-kode Splitting: Indlæg er startpunkter på dit websted eller app, som et værktøj som webpack kan se på at opbygge dit afhængighedstræ. Splitting af poster er nyttige til sider, hvor klient-side-routing ikke bruges, eller du stoler på en kombination af server- og klientsidegengivelse.

Til vores formål i denne artikel koncentrerer vi os om dynamisk kodeopdeling.

Få hænder på med kodesparning

Lad os optimere JavaScript-ydeevnen af ​​a Enkel applikation, der sorterer tre tal Gennem kodeopdeling - dette er en app af min kollega houssein djireh. Workflowen vi vil bruge til at gøre vores JavaScript-belastning hurtigt mål, optimere og overvåge. Start her .

Måle præstation

Før vi forsøger at tilføje eventuelle optimeringer, skal vi først måle udførelsen af ​​vores JavaScript. Da Magic Sorter appen er vært på glitch, vil vi bruge sit kodende miljø. Sådan går det om det:

• Klik på knappen Vis live.
• Åbn devtools ved at trykke på CMD + OPTION + I / CTRL + SHIFT + I.
• Vælg netværkspanelet.
• Sørg for at deaktivere cache er markeret og genindlæs appen.

Denne enkle applikation ser ud til at bruge 71,2 kb javaScript for at sortere gennem et par numre. Det synes bestemt ikke rigtigt. I vores kilde. src / index.js. , Lodash Utility Library importeres, og vi bruger Sorter efter - En af sine sorteringsværktøjer - for at sortere vores tal. Lodash tilbyder flere nyttige funktioner, men appen bruger kun en enkelt metode fra den. Det er en almindelig fejl at installere og importere alle en tredjeparts afhængighed, når du i virkeligheden kun skal bruge en lille del af det.

Optimer din bundle

Der er et par muligheder til rådighed for at trimme vores JavaScript-bundle størrelse:

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

Valg 1 og 2 er egnede til at reducere vores bundle størrelse - disse giver sandsynligvis mening for en reel applikation. Til undervisningsformål vil vi prøve noget andet. Valg 3 og 4 hjælper med at forbedre programmets ydeevne.

Importer kun den kode, du har brug for

Vi ændrer et par filer til kun at importere single Sorter efter Metode vi har brug for fra lodash. Lad os begynde med at erstatte vores lodash. afhængighed i Package.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 _ fra "lodash";
importere sorteby fra "lodash.sortby"; 

Dernæst opdaterer vi, hvordan værdierne bliver sorteret:

 JS
Form.AddeventListener ("Send", E = & GT; {
  e.preventdefault ();
  const-værdier = [input1.valueArnumber, input2.valueArnumber, input3.ValueArnumber];
  const sortedvalues ​​= _.sortby (værdier);
  const sorteringsvalues ​​= sorteringsby (værdier);
  resultater.innerhtml = `
    & lt; h2 & gt;
      $ {sorteringsvalues}
    & lt; / h2 & gt;
  `
}); 

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

JavaScript Code Splitting

Webpack er en af ​​de mest populære JavaScript-modulbundere, der bruges af webudviklere i dag. IT 'Bundles' (Combines) Alle dine JavaScript-moduler og andre aktiver til statiske filer Webbrowsere kan læse.

Single Bundle 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.

Ved hjælp af dynamisk import (med importere() Nøgleord), et andet script kan være dovenbelastet på efterspørgsel. I vores magiske numre app kan koden, der udgør scriptet, indlæses efter behov, når brugeren klikker på knappen. Vi begynder med at fjerne den øverste niveau import til sorteringsmetoden i src / index.js. :

 Import Sortby fra "LODASH.SORTBY"; 

Importer det inden for begivenhedslisten, der brænder, når knappen klikkes:

Form.AddeventListener ("Send", E = & GT; {
  e.preventdefault ();
  Import ('lodash.sortby')
    .then (modul = & gt; module.default)
    .Then (sortInput ())
    .catch (Err = & GT; {Alert (Err)});
});

Denne dynamik importere() Funktion Vi bruger er en del af et standardtrack forslag til at inkludere evnen til dynamisk at importere et modul i JavaScript-sprogstandarden. Webpack understøtter allerede denne syntaks. Du kan læse mere om, hvordan dynamisk import arbejder I denne artikel .

Det importere() erklæring returnerer et løfte, når det løser. Webpack anser dette som et splitpunkt, at det vil bryde ud i et separat script (eller chunk). Når modulet er returneret, er module.default. bruges til at referere til standard eksport, der leveres af lodash. . Løftet er kædet med en anden .derefter() ringer A. sortInput. metode til at sortere de tre inputværdier. I slutningen af ​​løftekæden, .fangst() opfordres til at håndtere, hvor løftet afvises som følge af en fejl.

I en reel produktionsapplikationer skal du håndtere dynamiske importfejl på passende vis. Enkle advarselsmeddelelser (svarende til hvad der bruges her) er, hvad der bruges og må ikke give den bedste brugeroplevelse til at lade brugerne vide, at noget er gået galt.

Hvis du ser en lintingfejl som "Parsing Fejl: Import og Export kan kun vises på øverste niveau", ved, at dette skyldes den dynamiske importsyntax, der endnu ikke er færdiggjort. Selvom Webpack understøtter det, er indstillingerne for ESLINT (et JavaScript-lintingværktøj), der bruges af glitch, ikke blevet opdateret for at inkludere denne syntaks endnu, men det virker stadig.

Det sidste, 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 DOMEN:

 Const sortInput = () = & gt; {
  returnere (Sortby) = & gt; {
    const værdier = [
      input1.valueArnumber,
      input2.ValueArnumber,
      input3.valueArnumber.
    ];
    const sorteringsvalues ​​= sorteringsby (værdier);
    resultater.innerhtml = `
      & lt; h2 & gt;
        $ {sorteringsvalues}
      & lt; / h2 & gt;
    `
  };
} 

Overvåg tallene

Lad os nu genindlæse programmet en sidste gang og holde øje med netværkspanelet. Du bør bemærke, hvordan kun en lille indledende bundt downloades, når appen læser. Når knappen er klikket for at sortere indgangsnumrene, bliver script / chunk, der indeholder sorteringskoden, hentes og udføres. Kan du se, hvordan tallene stadig bliver sorteret, da vi ville forvente dem til?

JavaScript Code Splitting og Lazy-loading kan være meget nyttig til trimning af den indledende bundle størrelse på din app eller websted. Dette kan direkte resultere i hurtigere sidelastetider for brugere. Selvom vi har set på at tilføje kode opdeling til en vanilje JavaScript-program, kan du også anvende det på apps bygget med biblioteker eller rammer.

Lazy-loading med et JavaScript-bibliotek eller ramme

En masse populære rammer understøtter tilføjelseskodeopdeling og dovenindlæsning ved hjælp af dynamisk import og webpack.

Sådan er du måske doven-indlæs en film 'Beskrivelse' -komponent ved hjælp af reagere (med Reagerer.lazy () og deres spændingsfunktion) for at give en "loading ..." fallback, mens komponenten er doven-indlæst i (se her for nogle flere detaljer):

 Import reagerer, {spænding} fra 'reagere';
const Beskrivelse = React.lazy (() = & GT; Import ('./ Beskrivelse'));
Funktion app () {
  Vend tilbage (
    & lt; div & gt;
      & lt; h1 & gt; min film & lt; / h1 & gt;
      & lt; spænding fallback = "loading ..." & gt;
        & lt; Beskrivelse / & GT;
      & lt; / spænding og gt;
    & lt; / div & gt;
  );
} 

Kodeopdeling kan medvirke til at reducere indvirkningen af ​​javascript på din brugeroplevelse. Overvej det helt sikkert, hvis du har større JavaScript-bundter, og når du er i tvivl, skal du ikke glemme at måle, optimere og overvåge.

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

Relaterede artikler:

• 9 af de bedste JavaScript-rammer
• 15 Essentielle JavaScript-værktøjer, du skal bruge
• 14 af de bedste JavaScript API'er