Alles wat u moet weten over JavaScript-code splitsen

Moderne locaties combineren vaak al hun javascript in een enkele, grote main.js script. Dit bevat regelmatig de scripts voor al uw pagina's of routes, zelfs als gebruikers alleen een klein deel nodig hebben voor de pagina die ze bekijken.

Wanneer JavaScript op deze manier wordt geserveerd, kunnen de laadprestaties van uw webpagina's lijden - vooral met Responsive Web Design op mobiele apparaten. Laten we het dus oplossen door JavaScript-code splitsen te implementeren.

• Hoe sneller, lichter javascript codecode

Welk probleem is het splitsen van de code op?

Wanneer een webbrowser een & lt; script & gt; Het moet tijd doorbrengen met downloaden en verwerken van het JavaScript dat u verwijst. Dit kan zich snel aanvoelen op high-end apparaten, maar laden, parseren en uitvoeren van ongebruikte JavaScript-code kan een tijdje duren op gemiddelde mobiele apparaten met een langzamer netwerk en langzamer CPU. Als je ooit moet aanmelden bij Coffee-Shop of Hotel Wifi, weet je dat trage netwerkervaringen met iedereen kunnen gebeuren.

Elke seconde besteed aan het wachten op JavaScript om te voltooien op het opstarten kan vertragen hoe snel gebruikers in staat zijn om met uw ervaring te communiceren. Dit is met name het geval als uw UX op JS vertrouwt voor kritieke componenten of zelfs gewoon gebeurtenishandlers bevestigen voor eenvoudige stukken UI.

Moet ik de moeite nemen met het splitsen van de code?

Het is absoluut de moeite waard om jezelf te vragen of je een code hebt gemaakt (als je een simpele hebt gebruikt website bouwer Dat doe je waarschijnlijk niet). Als uw site JavaScript vereist voor interactieve inhoud (voor functies zoals menuteladen en carrousels) of is een applicatie met één pagina die afhankelijk is van JavaScript-frameworks om ui te renderen, is het antwoord waarschijnlijk 'ja'. Of code splitsing de moeite waard is voor uw site is een vraag die u zelf moet antwoorden. Je begrijpt je architectuur en hoe je site het beste laadt. Gelukkig zijn er hulpmiddelen beschikbaar om u hier te helpen. Vergeet niet dat als u wijzigingen in uw ontwerpsysteem uitvoert, deze wijzigingen in uw gedeeld opslaan cloud opslag Dus je team kan zien.

Hulp krijgen

Voor die nieuw voor JavaScript-code splitsen, Vuurtoren - Het deelvenster Audits in Chrome Developer-tools - kan een licht laten schijnen of dit een probleem is voor uw site. De audit waarnaar u wilt zoeken, is de uitvoeringstijd van JavaScript verminderen (gedocumenteerd hier ​Deze audit markeert alle scripts op uw pagina die een gebruiker kan uitstellen die ermee interactie heeft.

PageSpeed ​​Insights Is een online tool die ook de prestaties van uw site kan markeren - en omvat lab-gegevens van Lighthouse en Real-World-gegevens op uw site-prestaties van het verslagverslag van Chrome User Experience. Uw web hosting Service kan andere opties hebben.

Code-dekking in chromen ontwikkelaarstools

Als het erop lijkt, heb je dure scripts die beter kunnen worden gesplitst, de volgende tool om naar te kijken is de code van de code-dekking in de Chrome Developer-tools (Devtools & GT; Right-rechts-menu & GT; Meer Tools & GT; Dekking). Dit meet hoeveel ongebruikt javascript (en CSS) op uw pagina staat. Voor elk samengevat script toont Devtools de 'ongebruikte bytes'. Dit is code die u kunt overwegen om uit te spuiten en lui-laden wanneer de gebruiker het nodig heeft.

De verschillende soorten code splitsen

Er zijn een paar verschillende benaderingen die u kunt nemen als het gaat om Code Splitsen JavaScript. Hoeveel deze van toepassing op uw site heeft de neiging om te variëren, afhankelijk van de vraag of u de pagina / applicatie 'logica' wilt splitsen of bibliotheken / frameworks van andere 'verkopers' wenst.

Dynamische code splitsen: Veel van ons 'statisch' importeren JavaScript-modules en afhankelijkheden, zodat ze in een buildtijd in één bestand worden gebundeld. 'Dynamic' -code splitsen voegt de mogelijkheid toe om punten in je JavaScript te definiëren die je wilt splitsen en luie laden als dat nodig is. Modern JavaScript gebruikt de dynamiek importeren() verklaring om dit te bereiken. We zullen dit meer dekken.

Leveranciercode splitsen: De kaders en bibliotheken die u vertrouwt (bijvoorbeeld reageren, hoekig, vue of lodash), zijn onwaarschijnlijk dat u de scripts die u naar uw gebruikers verzendt, vaak als de 'logica' voor uw site. Om de negatieve impact van cache-ongeldigatie voor gebruikers terug te brengen die naar uw site keren, kunt u uw 'leveranciers' in een afzonderlijk script splitsen.

Entry-Point Code Spliting: Inzendingen zijn uitgangspunten in uw site of app die een tool zoals Webpack kan bekijken om uw afhankelijkheidsboom op te bouwen. Splitsen door vermeldingen is handig voor pagina's waar client-side-routering niet wordt gebruikt of u vertrouwt op een combinatie van server- en client-side-weergave.

Voor onze doeleinden in dit artikel zullen we ons concentreren op dynamische codesplitsingen.

Krijg de hand met code splitsen

Laten we de JavaScript-prestaties van A optimaliseren Eenvoudige toepassing die drie nummers sorteert Door middel van code splitsen - dit is een app door mijn collega HouseSein Djirdeh. De workflow die we zullen gebruiken om onze JavaScript-belasting snel te maken, is maatregel, optimaliseren en monitoren. Begin hier ​

Meet de prestaties

Voordat u probeert optimalisaties toe te voegen, meten we eerst de prestaties van ons JavaScript. Naarmate de Magic Sorter-app op Glitch wordt gehost, gebruiken we de coderingsomgeving. Hier is hoe je erover moet gaan:

• Klik op de knop Live Show.
• Open de Devtools door op CMD + Optie + I / CTRL + SHIFT + I te drukken.
• Selecteer het netwerkpaneel.
• Zorg ervoor dat de cache wordt gecontroleerd en de app opnieuw laden.

Deze eenvoudige toepassing lijkt 71,2 KB van JavaScript te gebruiken om door een paar nummers te sorteren. Dat lijkt zeker niet goed. In onze bron src / index.js , de Lodash Utility Library wordt geïmporteerd en we gebruiken sorteer op - een van de sorteerhulpprogramma's - om onze nummers te sorteren. Lodash biedt verschillende nuttige functies, maar de app gebruikt alleen een enkele methode eruit. Het is een veel voorkomende fout om alle afhankelijkheid van derden te installeren en importeren wanneer u in feite een klein deel ervan hoeft te gebruiken.

Optimaliseer uw bundel

Er zijn een paar opties beschikbaar voor het trimmen van onze JavaScript-bundelgrootte:

1. Schrijf een aangepaste sorteermethode in plaats van te vertrouwen op een derde Party-bibliotheek.
2. Gebruik Array.prototype.sort () , dat is ingebouwd in de browser.
3. Importeer alleen de sorteer op Methode van Laagash in plaats van de hele bibliotheek.
4. Download alleen de code voor sorteren wanneer een gebruiker het nodig heeft (wanneer ze op een knop klikken).

Opties 1 en 2 zijn geschikt voor het verminderen van onze bundelgrootte - deze zijn waarschijnlijk logisch voor een echte toepassing. Voor lesdoeleinden gaan we iets anders proberen. Opties 3 en 4 helpen de prestaties van de toepassing te verbeteren.

Importeer alleen de code die u nodig hebt

We wijzigen een paar bestanden om alleen de single te importeren sorteer op methode die we nodig hebben van Laagash. Laten we beginnen met het vervangen van onze lodash afhankelijkheid in pakket ​

"lodash": "^4.7.0",

hiermee:

"lodash.sortby": "^4.7.0",

In Src / Index.js importeren we deze meer specifieke module:

 JS
importeren "./style.css";
import _ van "Lodash";
Importeer Sortby van "Lodash.Sortby"; 

Vervolgens zullen we updaten hoe de waarden worden gesorteerd:

 JS
form.AddeventListener ("indienen", e = & gt; {
  e.preventdefault ();
  const waarden = [Input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  const sortedvalues ​​= _.sortby (waarden);
  COND SORTEDVALUES = Sorteer (waarden);
  resultaten.innerhtml = `
    & LT; H2 & GT;
      $ {SortedValues}
    & LT; / H2 & GT;
  ​
}); 

Reload the Magic Numbers-app, open ontwikkelaarstools en kijk opnieuw naar het netwerkpaneel. Voor deze specifieke app werd onze bundelgrootte verminderd met een schaal van vier met weinig werk. Maar er is nog steeds veel ruimte voor verbetering.

JavaScript-code splitsen

Webpack is een van de meest populaire Javascript-modulebundlers die vandaag door webontwikkelaars worden gebruikt. Het 'bundels' (combineert) Al uw JavaScript-modules en andere activa in statische bestanden Webbrowsers kunnen lezen.

De enkele bundel in deze toepassing kan worden opgesplitst in twee afzonderlijke scripts:

• Men is verantwoordelijk voor de code die de initiële route maakt.
• Een andere bevat onze sorteercode.

Dynamische invoer gebruiken (met de importeren() Keyword), een tweede script kan lui zijn op aanvraag. In onze Magic Numbers-app kan de code die het script uitmaken, indien nodig worden geladen wanneer de gebruiker op de knop klikt. We beginnen met het verwijderen van de invoer op het hoogste niveau voor de sorteermethode in src / index.js ​

 Importeer Sortby van "Lodash.Sortby"; 

Importeer het binnen de gebeurtenisluisteraar die vuurt wanneer op de knop wordt geklikt:

form.AddeventListener ("indienen", e = & gt; {
  e.preventdefault ();
  import ('lodash.sortby')
    .Ten (module = & gt; module.default)
    .THEN (SETINPUT ())
    .catch (err = & gt; {alert (err)});
​

Deze dynamiek importeren() FUNCTIE WE GEBRUIKT DAT EEN PLAATSELIJKE STANDARDTRACK VOORSTELLEN VOOR INVOER DE MOGELIJKHEID OM EEN MODULIER IN DE JAVASCIPSCRIPT-TAALAND STANDAARD TE INSTELLEN. Webpack ondersteunt deze syntaxis al. Je kunt meer lezen over hoe dynamische import werkt in dit artikel ​

De importeren() Verklaring retourneert een belofte wanneer het oplost. Webpack beschouwt dit als een splitpunt dat het in een afzonderlijk script (of chunk) zal uitbreken. Zodra de module is geretourneerd, de module.default wordt gebruikt om de standaard export te verwijzen lodash ​De belofte is geketend met een ander .vervolgens() bellen uitgang methode om de drie invoerwaarden te sorteren. Aan het einde van de belofte keten, .vangst() wordt opgeroepen om te hanteren waar de belofte wordt afgewezen als het resultaat van een fout.

In een echte productie-toepassingen moet u dynamische invoerfouten op de juiste manier aan. Eenvoudige waarschuwingsberichten (vergelijkbaar met wat hier wordt gebruikt) zijn wat worden gebruikt en mogelijk niet de beste gebruikerservaring bieden voor het laten weten dat gebruikers iets verkeerd zijn gegaan.

Als u een voeringfout ziet zoals "Parreling-fout: import en export mag alleen op het hoogste niveau verschijnen", weet dat dit te wijten is aan de dynamische importsyntaxis die nog niet is afgerond. Hoewel Webpack het ondersteunt, zijn de instellingen voor eSlint (een JavaScript-voeringstool) die door Glitch worden gebruikt, niet bijgewerkt om deze syntaxis te bevatten, maar het werkt nog steeds.

Het laatste dat we moeten doen is het schrijven van de uitgang methode aan het einde van ons bestand. Dit moet een functie zijn die een functie retourneert die de geïmporteerde methode inneemt lodash.sort ​De geneste functie kan de drie ingangswaarden sorteren en de DOM bijwerken:

 const sorteren = () = & gt;​
  Return (Sortby) = & GT;​
    const-waarden = [
      Input1.valueasnumber,
      Input2.Valueasnumber,
      Input3.Valueasnumber
    ​
    COND SORTEDVALUES = Sorteer (waarden);
    resultaten.innerhtml = `
      & LT; H2 & GT;
        $ {SortedValues}
      & LT; / H2 & GT;
    ​
  ​
} 

Controleer de cijfers

Laten we nu de vorige keer de toepassing opnieuw laden en het netwerkpaneel in de gaten houden. U moet opmerken hoe slechts een kleine initiële bundel wordt gedownload wanneer de app laadt. Nadat de knop wordt geklikt om de invoernummers te sorteren, wordt het script / brok met de sorteercode opgehaald en uitgevoerd. Zie je hoe de cijfers nog steeds worden gesorteerd als we ze zouden verwachten?

JavaScript-code splitsen en lui-laden kan erg handig zijn voor het bijsnijden van de initiële bundelgrootte van uw app of site. Dit kan direct resulteren in snellere pagina laadtijden voor gebruikers. Hoewel we hebben gekeken naar het toevoegen van codesplitsing aan een vanille-javascript-applicatie, kunt u het ook toepassen op apps die zijn gebouwd met bibliotheken of kaders.

Lui laden met een JavaScript-bibliotheek of kader

Veel populaire frameworks-ondersteuning die code splitsen en lui-laden toevoegen met behulp van dynamische invoer en webpack.

Hier is hoe je een film 'beschrijving' component kunt laden met behulp van reageer (met Reageren.Lazy () en hun spannende functie) om een ​​"loading ..." terug te bieden terwijl de component lui is in (zie hier Voor wat meer details):

 Import reageren, {suspense} van 'reageert';
const beschrijving = react.Lazy (() = & gt; import ('./ Beschrijving');
Functie-app () {
  terug (
    & LT; DIV & GT;
      & LT; H1 & GT; My Movie & LT; / H1 & GT;
      & lt; suspense fallback = "loading ..." & GT;
        & LT; Beschrijving / & GT;
      & lt; / suspense & gt;
    & LT; / DIV & GT;
  ​
} 

Code splitsen kan helpen de impact van JavaScript op uw gebruikerservaring te verminderen. Overweeg het zeker als u grotere Javascript-bundels hebt en in twijfel, vergeet dan niet om te meten, te optimaliseren en te bewaken.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 317 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop hier nummer 317 of Abonneer hier ​

Gerelateerde artikelen:

• 9 van de beste JavaScript-frameworks
• 15 essentiële JavaScript-tools die u moet gebruiken
• 14 van de beste JavaScript-API's