Allt du behöver veta om JavaScript-koduppdelning

Moderna webbplatser kombinerar ofta hela deras javascript i en enda, stor main.js manus. Detta innehåller regelbundet skripten för alla dina sidor eller rutter, även om användarna bara behöver en liten del för den sida de tittar på.

När JavaScript serveras på det här sättet kan laddningsprestandan på dina webbsidor lida - särskilt med Responsiv webbdesign på mobila enheter. Så låt oss fixa det genom att implementera JavaScript-koduppdelning.

• Hur man kodar snabbare, lättare javascript

Vilket problem uppdelar koden?

När en webbläsare ser en & lt; script & gt; Det behöver spendera tid nedladdning och bearbetning av javascript du refererar. Detta kan känna sig snabb på avancerade enheter, men lastning, analysering och exekvering av oanvänd JavaScript-kod kan ta ett tag på genomsnittliga mobila enheter med ett långsammare nätverk och långsammare CPU. Om du någonsin har fått logga in på Coffee-Shop eller Hotel WiFi, vet du långsamma nätverksupplevelser kan hända med alla.

Varje sekund som väntar på JavaScript för att slutföra uppstart kan fördröja hur snart användarna kan interagera med din erfarenhet. Detta är särskilt fallet om din UX är beroende av JS för kritiska komponenter eller till och med bara att fästa händelsehanterare för enkla bitar av UI.

Behöver jag störa med koduppdelning?

Det är definitivt värt att fråga dig själv om du behöver kodas upp (om du har använt en enkel Website Builder Du gör det antagligen inte). Om din webbplats kräver JavaScript om interaktivt innehåll (för funktioner som menyslådor och karuseller) eller är en ensidig ansökan som bygger på JavaScript-ramar för att göra UI, är svaret sannolikt "ja". Huruvida Code Splitting är värt för din webbplats är en fråga som du behöver svara på dig själv. Du förstår din arkitektur och hur din webbplats laddas bäst. Tack och lov finns det verktyg som är tillgängliga för att hjälpa dig här. Kom ihåg att om du implementerar ändringar över ditt designsystem, spara de ändringar i din delade molnlagring Så ditt lag kan se.

Få hjälp

För de nya till JavaScript-koden splittring, Fyr - Revisionspanelen i Chrome Developer Tools - kan hjälpa till att skina ett ljus om det här är ett problem för din webbplats. Den revision du vill leta efter är att minska JavaScript-exekveringstiden (dokumenterad här ). Denna revision belyser alla skript på din sida som kan fördröja en användare som interagerar med den.

PageSpeed ​​Insights är ett onlineverktyg som också kan markera din webbplatss prestanda - och innehåller laboratorieuppgifter från fyr och verklig data på din webbplatsens prestanda från Chrome User Experience-rapporten. Din webbhotell Tjänsten kan ha andra alternativ.

Kodtäckning i Chrome Developer Tools

Om det ser ut som om du har kostsamma skript som kan delas bättre, är det nästa verktyget att titta på kodtäckningsfunktionen i Chrome Developer-verktygen (DevTools & GT; Top-Right Menu & GT; Fler verktyg och GT; täckning). Detta mäter hur mycket oanvända JavaScript (och CSS) är på din sida. För varje script som sammanfattas kommer DevTools att visa de "oanvända byte". Det här är kod du kan överväga att dela ut och lata laddning när användaren behöver den.

De olika typerna av koduppdelning

Det finns några olika tillvägagångssätt du kan ta när det gäller koduppdelning JavaScript. Hur mycket gäller för din webbplats tenderar att variera beroende på om du vill dela upp sidan / applikation "logik" eller dela upp bibliotek / ramar från andra "leverantörer".

Dynamisk koduppdelning: Många av oss "statiskt" import javascript-moduler och beroenden så att de är buntade ihop i en fil på byggtid. "Dynamisk" Code Splitting lägger till möjligheten att definiera poäng i ditt JavaScript som du vill dela upp och latbelastning efter behov. Modern JavaScript använder den dynamiska importera() uttalande för att uppnå detta. Vi täcker det här kortare.

Leverantörskod Splitting: De ramar och bibliotek du litar på (t ex reagerar, vinkel, vue eller lodash) är osannolikt att förändras i de skript du skickar ner till dina användare, ofta som "logik" för din webbplats. För att minska de negativa effekterna av cache-ogiltigförklaring för användare som återvänder till din webbplats kan du dela upp dina "leverantörer" till ett separat manus.

Entry-Point Code Splitting: Inlägg är utgångspunkter på din webbplats eller app som ett verktyg som webbhacka kan titta på att bygga upp ditt beroende träd. Splitting av poster är användbart för sidor där klient-sida routing inte används eller du är beroende av en kombination av server och klient-sida-återgivning.

För våra ändamål i den här artikeln kommer vi att koncentrera oss på dynamisk koduppdelning.

Hämta händerna med koduppdelning

Låt oss optimera Javascript-prestanda hos a Enkel applikation som sorterar tre nummer Genom koduppdelning - det här är en app av min kollega Houssein Djirdh. Arbetsflödet vi ska använda för att göra vår JavaScript-belastning snabbt är åtgärd, optimera och övervaka. Börja här .

Mäta prestanda

Innan vi försöker lägga till eventuella optimeringar, kommer vi först att mäta prestanda för vår JavaScript. Eftersom den magiska sorteringsappen är värd på Glitch, använder vi sin kodningsmiljö. Så här går det till det:

• Klicka på knappen Visa live.
• Öppna devTools genom att trycka på CMD + -alternativ + I / Ctrl + Shift + I.
• Välj nätverkspanelen.
• Se till att inaktivera cacheminnet kontrolleras och ladda om appen.

Denna enkla applikation verkar använda 71,2 kb javascript bara för att sortera igenom några få nummer. Det verkar verkligen inte rätt. I vår källa src / index.js LODASH-verktygsbiblioteket importeras och vi använder sortera efter - Ett av dess sorteringsverktyg - för att sortera våra nummer. Lodash erbjuder flera användbara funktioner, men appen använder bara en enda metod från den. Det är ett vanligt misstag att installera och importera allt ett tredjepartsberoende när du faktiskt behöver använda en liten del av den.

Optimera din bunt

Det finns några alternativ tillgängliga för trimning av vår JavaScript-buntstorlek:

1. Skriv en anpassad sorteringsmetod istället för att förlita sig på ett tredjepartsbibliotek.
2. Använda sig av Array.prototype.sort () , som är inbyggd i webbläsaren.
3. Importera bara sortera efter Metod från Lodash istället för hela biblioteket.
4. Ladda endast koden för sortering när en användare behöver den (när de klickar på en knapp).

Alternativ 1 och 2 är lämpliga för att minska vår buntstorlek - dessa är förmodligen meningsfulla för en riktig applikation. För undervisningsändamål kommer vi att prova något annat. Alternativ 3 och 4 hjälper till att förbättra programmets prestanda.

Endast importera koden du behöver

Vi ändrar några filer för att bara importera singeln sortera efter Metod vi behöver från lodash. Låt oss börja med att ersätta vårt lodas beroendet i paket.json :

"lodash": "^4.7.0",

med detta:

"lodash.sortby": "^4.7.0",

I SRC / Index.js importerar vi den här mer specifika modulen:

 JS
importera "/style.css ";
Importera _ från "Lodash";
Importera sortering från "Lodash.sortby"; 

Därefter uppdaterar vi hur värdena blir sorterade:

 JS
form.addeventlistener ("Skicka", e = & gt; {
  E.PreventDefault ();
  CONST VÄRDER = [INPUT1.VALUEASNUMBER, INPUT2.ValueAsNumber, input3.ValueAsNumber];
  Const SortedValues ​​= _.Sortby (värden);
  CONST SEOREDVALUES = SORTBY (värden);
  resultat.innerhtml = `
    & lt; H2 & GT;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}); 

Ladda om Magic Numbers-appen, öppna upp Developer Tools och titta på nätverkspanelen igen. För den här specifika appen reducerades vår buntstorlek med en skala av fyra med lite arbete. Men det finns fortfarande mycket utrymme för förbättring.

Javascript-koduppdelning

Webbpackning är en av de mest populära JavaScript-modulen Bundlers som används av webbutvecklare idag. Det "buntar" (kombinerar) alla dina JavaScript-moduler och andra tillgångar i statiska filer webbläsare kan läsa.

Enkelbuntet i den här applikationen kan delas upp i två separata skript:

• En är ansvarig för kod som utgör den ursprungliga vägen.
• En annan innehåller vår sorteringskod.

Med hjälp av dynamisk import (med importera() Nyckelord), ett andra skript kan vara latbelastat på begäran. I vår Magic Numbers-app kan koden som gör upp skriptet laddas efter behov när användaren klickar på knappen. Vi börjar med att ta bort importen på toppnivå för sorteringsmetoden i src / index.js :

 Importera sortering från "Lodash.sortby"; 

Importera den inom händelse av lyssnaren som brinner när knappen klickas:

form.addeventlistener ("Skicka", e = & gt; {
  E.PreventDefault ();
  Import ('Lodash.Sortby')
    .Then (modul = & gt; module.default)
    .then (sortinput ())
    .Catch (err = & gt; {alert (err)});
});

Denna dynamiska importera() Funktion Vi använder är en del av ett StateStrack-förslag för att inkludera möjligheten att dynamiskt importera en modul i JavaScript-språkstandarden. Webbpackning stöder redan denna syntax. Du kan läsa mer om hur dynamisk import fungerar i den här artikeln .

De importera() uttalandet returnerar ett löfte när det löser sig. WebPack anser detta som en delad punkt som den kommer att bryta ut i ett separat manus (eller chunk). När modulen returneras, är modul.default används för att referera till standard export som tillhandahålls av lodas . Löftet är kedjat med en annan .sedan() kallar a sortinput Metod för att sortera de tre ingångsvärdena. I slutet av löfte kedjan, .fånga() uppmanas att hantera var löftet avvisas som ett resultat av ett fel.

I en riktig produktionsapplikationer ska du hantera dynamiska importfel på lämpligt sätt. Enkla varningsmeddelanden (liknar det som används här) är vad som används och kanske inte ger den bästa användarupplevelsen för att låta användarna veta att något har gått fel.

Om du ser ett lintningsfel som "Parsingfel: Import och export kan bara visas på toppnivån", vet att detta beror på att den dynamiska importsyntaxen ännu slutfördes. Även om webbhack stöder det, har inställningarna för Eslint (ett Javascript-lintverktyg) som används av Glitch inte uppdaterats för att inkludera denna syntax ännu, men det fungerar fortfarande.

Det sista vi behöver göra är att skriva sortinput Metod i slutet av vår fil. Detta måste vara en funktion som returnerar en funktion som tar i den importerade metoden från Lodash.Sortby . Den kapslade funktionen kan sortera de tre ingångsvärdena och uppdatera DOM:

 const sortinput = () = & gt; {
  returnera (sortby) = & gt; {
    CONST-värden = [
      Input1.ValueAsNumber,
      Input2.ValueAsNumber,
      Input3.ValueAsNumber
    ];
    CONST SEOREDVALUES = SORTBY (värden);
    resultat.innerhtml = `
      & lt; H2 & GT;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

Övervaka siffrorna

Låt oss nu ladda om programmet en sista gång och hålla ett ögon på nätverkspanelen. Du bör märka hur endast en liten initialbunt hämtas när appen laddas. När knappen klickas på för att sortera inmatningsnumren får man skript / chunk som innehåller sorteringskoden hämtas och exekveras. Ser du hur siffrorna fortfarande sorteras som vi förväntar oss?

Javascript-koduppdelning och latbelastning kan vara mycket användbar för att trimma ner den ursprungliga buntstorleken på din app eller webbplats. Detta kan direkt resultera i snabbare sidladdningstider för användare. Även om vi har tittat på att lägga till koduppdelning till ett Vanilla Javascript-program, kan du också tillämpa den på appar som är byggda med bibliotek eller ramar.

Lazy-loading med ett JavaScript-bibliotek eller ramverk

Många populära ramar stöder lägger till koduppdelning och latbelastning med dynamisk import och webbhacka.

Så här kan du lata en film "Beskrivning" -komponent med hjälp av reagera (med Reagera.lazy () och deras spänningsfunktion) för att ge en "laddning ..." fallback medan komponenten är lat-laddad i (se här För några fler detaljer):

 Import reagera, {Suspense} från "ReagE";
CONST BESKRIVNING = reagera.lazy (() = & gt; import ('./beskrivning'));
Funktionsapp () {
  lämna tillbaka (
    & lt; div & gt;
      & lt; H1 & GT; Min film & LT; / H1 & GT;
      & LT; Suspense Fallback = "Laddar ..." & GT;
        & LT; Beskrivning / & GT;
      & LT; / Suspense & GT;
    & lt; / div & gt;
  );
} 

Koduppdelning kan bidra till att minska effekten av javascript på din användarupplevelse. Definitivt överväga det om du har större JavaScript-buntar och när du är i tvivel, glöm inte att mäta, optimera och övervaka.

Denna artikel publicerades ursprungligen i utgåva 317 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp utgåva 317 här eller prenumerera här .

Relaterade artiklar:

• 9 av de bästa JavaScript-ramarna
• 15 Essential JavaScript-verktyg som du ska använda
• 14 av de bästa Javascript API