Kaikki mitä sinun tarvitsee tietää JavaScript-koodin jakamisesta

Moderni sivustot yhdistyvät usein kaikki JavaScriptiksi yhteen, suureksi Main.js Käsikirjoitus. Tämä sisältää säännöllisesti kaikki sivut tai reitit, vaikka käyttäjät tarvitsevat vain pienen osan sivulle, jota he katsovat.

Kun JavaScript tarjoillaan tällä tavoin, verkkosivujen lataustehokkuus voi kärsiä - varsinkin Vastaava web-suunnittelu mobiililaitteissa. Joten korjaamme sen toteuttamalla JavaScript-koodin jakamista.

• Kuinka koodaa nopeammin, kevyempi JavaScript

Mikä ongelma koodi jakaa?

Kun verkkoselain näkee a & lt; skripti & gt; Sen on vietettävä aikaa lataamalla ja käsittelemään JavaScriptin viittausta. Tämä voi tuntea nopeasti korkealaatuisia laitteita, mutta käyttämättömän JavaScript-koodin lataaminen, jäsentäminen ja suorittaminen voi kestää jonkin aikaa keskimääräisissä mobiililaitteissa, joissa on hitaampi verkko ja hitaampi CPU. Jos olet koskaan joutunut kirjautumaan kahvila tai hotelli WiFi, tiedät hitaita verkkokokemuksia voi tapahtua kaikille.

Jokainen toinen vietti odottamassa JavaScript lopettaa käynnistys voi viivyttää, kuinka pian käyttäjät voivat olla vuorovaikutuksessa kokemuksenne kanssa. Tämä pätee erityisesti, jos UX luottaa JS: lle kriittisiä komponentteja tai jopa vain kiinnittää tapahtumien käsittelijöitä yksinkertaisille UI-kappaleille.

Tarvitseeko vaivata koodin halkaisua?

Se on ehdottomasti syytä kysyä itseltäsi, tarvitsetkokokokoon (jos olet käyttänyt yksinkertaista Verkkosivuston rakentaja Luultavasti et). Jos sivustosi vaatii JavaScriptin vuorovaikutteiselle sisällölle (ominaisuuksille, kuten valikkolevyt ja karusellit) tai on yksi sivuhakemus, joka perustuu JavaScript-kehyksiin, jotta UI, vastaus on todennäköisesti "kyllä". Onko koodin halkaisija kannattava sivustoosi on kysymys, sinun täytyy vastata itsellesi. Ymmärrät arkkitehtuurin ja miten sivustosi latautuu parhaiten. Onneksi on käytettävissä työkaluja, jotka auttavat sinua täällä. Muista, että jos toteutat muutoksia suunnittelujärjestelmään, tallenna nämä muutokset jaetun pilvivarasto Joten tiimisi voi nähdä.

Hae apua

Niille uudista JavaScript-koodin halkaisu, Majakka - Chrome-kehittäjätyökalujen tarkastuspaneeli - voi auttaa loistamaan valon siitä, onko tämä ongelma sivustollesi. Tarkastus, jonka haluat etsiä, on vähentää JavaScriptin toteutusaika (dokumentoitu tässä ). Tämä tarkastus korostaa kaikkia sivusi skriptejä, jotka voivat viivyttää sitä vuorovaikutuksessa sen kanssa.

PagesPed Insights On online-työkalu, joka voi myös korostaa sivuston suorituskykyä - ja sisältää laboratoriotietoja majakka ja real-maailman tiedot sivuston suorituskyvystä Chrome-käyttäjäkokemusraportista. Sinun sivujen ylläpito Palvelu voi olla muita vaihtoehtoja.

Koodin kattavuus Chrome Developer Tools

Jos näyttää siltä, ​​että sinulla on kalliita skriptejä, jotka voisivat olla parempia jaettuja, seuraava työkalu on Chrome Developer Tools (DevTools & GT; ylhäältä valikko ja gt; enemmän työkaluja & gt; kattavuus). Tämä mittaa, kuinka paljon käyttämättömiä JavaScript (ja CSS) on sivussasi. Jokaiselle komentosarjalle yhteenveto, Devtools näyttää "käyttämättömät tavut". Tämä on koodi, jonka voit harkita jakamista ja laiska kuormitusta, kun käyttäjä tarvitsee sitä.

Eri tyyppinen koodi jakaminen

On olemassa muutamia erilaisia ​​lähestymistapoja, joita voit ottaa javascriptin jakamiseen. Kuinka paljon näitä sovelletaan sivustoosi vaihtelevat riippuen siitä, haluatko jakaa sivun / hakemuksen "logiikan" tai jakaa kirjastot / kehykset muista "myyjiltä".

Dynaaminen koodi halkaisu: Monet meistä "staattisesti" tuonti JavaScript-moduulit ja riippuvuudet niin, että ne on yhdistetty yhteen tiedostoon rakennusaikana. "Dynamic" -koodin halkaisu lisää kykyä määritellä pisteitä JavaScriptissä, että haluat jakaa ja laiska-kuormituksen tarpeen mukaan. Moderni JavaScript käyttää dynaamista tuonti() lausunto tämän saavuttamiseksi. Me kattaamme tämän pian.

Vendor Code Splitting: Kehykset ja kirjastot, joihin olet luotettava (esim. Reagoi, kulma, Vue tai Lodash), eivät todennäköisesti muutu käyttämäsi komentosarjoihin, usein sivustosi "logiikka". Voit vähentää välimuistin mitätöinnin kielteisiä vaikutuksia sivustoosi palaaville käyttäjille voit jakaa "myyjäsi" erilliseen käsikirjoitukseen.

Entry-Point -koodin halkaisu: Merkinnät ovat lähtökohdat sivustossa tai sovelluksessa, että työkalu, kuten webpack, voi katsoa rakentaa riippuvuuspuun. Merkintöjen jakaminen on hyödyllistä sivuille, joissa asiakaspuolen reititystä ei käytetä tai luotat palvelimen ja asiakaspuolen renderöinnin yhdistelmälle.

Meidän tarkoituksemme tässä artikkelissa keskitymme dynaamisen koodin jakamiseen.

Hanki kädet koodin halkaisulla

Optimoimaan A JavaScript-suorituskyky Yksinkertainen sovellus, joka lajittelee kolme numeroa Koodin jakamisen kautta - tämä on kollegani Housseen Djirdehehin sovellus. Työnkulku käytämme, jotta JavaScript-kuormitus on nopeasti mitata, optimoida ja seurata. Aloita tästä .

Mittaa suorituskyky

Ennen kuin yrität lisätä optimointeja, aiomme ensin mitata JavaScriptin suorituskykyä. Koska Magic Sorter -sovellus isännöi häiriöitä, käytämme sen koodausympäristöä. Näin mennä siihen:

• Napsauta Näytä live-painiketta.
• Avaa DeVTools painamalla CMD + -vaihtoehto + I / Ctrl + Shift + I.
• Valitse verkko-paneeli.
• Varmista, että käytöstä välimuisti tarkistetaan ja lataa sovellus uudelleen.

Tämä yksinkertainen sovellus näyttää olevan käyttää 71,2 kb javascriptin vain muutaman numeron kautta. Se ei varmasti näytä oikein. Lähteemme SRC / index.js , Lodash-apuohjelman kirjasto tuodaan ja käytämme Järjestä - Yksi sen lajitteluopiskelijoista - lajittelemaan numerot. Lodash tarjoaa useita hyödyllisiä toimintoja, mutta sovellus käyttää vain yhtä menetelmää siitä. On yleinen virhe asentaa ja tuoda kaikki kolmannen osapuolen riippuvuus, kun itse asiassa sinun tarvitsee vain käyttää pientä osaa.

Optimoi nippu

JavaScript-nipun koon leikkaamiseen on muutamia vaihtoehtoja:

1. Kirjoita mukautetun lajittelumenetelmä sen sijaan, että luotaisiin kolmannen kartonkirjastoon.
2. Käyttää Array.prototyyppi.sort () , joka on rakennettu selaimeen.
3. Vain tuoda Järjestä Menetelmä Lodash koko kirjaston sijasta.
4. Lataa vain lajittelun koodi, kun käyttäjä tarvitsee sen (kun ne napsauttavat painiketta).

Vaihtoehdot 1 ja 2 ovat tarkoituksenmukaisia ​​nipun koon vähentämiseen - nämä luultavasti ovat järkeviä todelliselle sovellukselle. Opetusta varten aiomme kokeilla jotain erilaista. Valinnat 3 ja 4 auttavat parantamaan sovelluksen suorituskykyä.

Tuo vain tarvitsemasi koodi

Muutamme muutamia tiedostoja vain yhdellä ainoaksi Järjestä Menetelmä, jota tarvitsemme Lodashista. Aloitetaan korvaamalla asua riippuvuus paketti.json :

"lodash": "^4.7.0",

tämän kanssa:

"lodash.sortby": "^4.7.0",

SRC / Index.js tuodaan tämän tarkemman moduulin:

 js
Tuo "./style.css";
Tuo "Lodash";
Tuo sortby "Lodash.Sortby"; 

Seuraavaksi päivitetään, miten arvot lajitellaan:

 js
form.addeventlistener ("Lähetä", e = & gt; {
  E.Preventdefault ();
  const arvot = [tulo1.valueasnumer, input2.valueasnumber, tulo3.valueasnumber];
  const lajikkeet = _.sortby (arvot);
  const lajikkeet = sorby (arvot);
  tulokset.innerhtml = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / h2 & gt;
  "
}); 

Lataa Magic Numbers -sovellus uudelleen, avaa kehittäjätyökalut ja katso verkkopaneeli uudelleen. Tämän spesifisen sovelluksen osalta nipun koon vähennettiin pienellä aineella pienellä työllä. Mutta on vielä paljon parannusta.

JavaScript-koodin halkaisu

WebPack on yksi suosituimmista JavaScript-moduulin bundlereistä, joita Web-kehittäjät käyttävät tänään. Se "nippu" (yhdistää) kaikki JavaScript-moduulit ja muut varat staattisiin tiedostoihin Web-selaimet voivat lukea.

Yksittäinen nippu tässä sovelluksessa voidaan jakaa kahteen erilliseen komentosarjaan:

• Yksi on vastuussa alkuperäisen reitin muodostamisesta.
• Toinen sisältää lajittelukoodin.

Dynaamisen tuonnin avulla ( tuonti() Avainsana), toinen komentosarja voi olla laiska ladattu kysyntään. Magic Numbers -sovelluksessamme koodi komentosarja voidaan ladata tarpeen mukaan, kun käyttäjä napsauttaa painiketta. Aloitamme poistamalla ylimmäisen tason tuonnin lajittelumenetelmälle SRC / index.js :

 Tuonti Sortby "Lodash.Sortby"; 

Tuo se tapahtuman kuuntelijalle, joka palaa, kun painiketta napsautetaan:

form.addeventlistener ("Lähetä", e = & gt; {
  E.Preventdefault ();
  Tuonti ('Lodash.Sortby)
    .Telä (moduuli = & gt; moduuli.default)
    .Telä (sortinput ())
    .Catch (ERR = & GT; {Alert (ERR)});
});

Tämä dynaaminen tuonti() Ominaisuus Käytämme on osa Standardstrack-ehdotusta siitä, että se sisältää kyvyn tuoda dynaamisesti moduuli JavaScript-kielen standardiin. WebPack tukee jo tätä syntaksia. Voit lukea lisää siitä, kuinka dynaaminen tuonti toimii tässä artikkelissa .

The tuonti() Lausunto palauttaa lupauksen, kun se ratkaisee. WebPack katsoo, että tämä jakautumispiste, että se puhkeaa erilliseen käsikirjoitukseen (tai chunk). Kun moduuli palautetaan, moduuli.default käytetään viitata oletusviennin asua . Lupaus on ketjutettu toisella .sitten() kutsua a lajitella Menetelmä lajitella kolme syöttöarvoa. Lupauksen ketjun lopussa, .ottaa kiinni() kehotetaan käsittelemään, missä lupaus hylätään virheen seurauksena.

Todellisissa tuotantosovelluksissa kannattaa käsitellä dynaamisia tuontivirheitä asianmukaisesti. Yksinkertaiset hälytysviestit (samanlainen kuin tässä käytetty) ovat käytettyjä ja eivät välttämättä tarjoa parasta käyttökokemusta, jotta käyttäjät voivat tietää jotain on mennyt pieleen.

Jos näet vitsausvirheen, kuten "jäsentäminen virhe: Tuonti ja vienti voivat näkyä vain ylätason", tiedä, että tämä johtuu dynaamisesta tuontisyntaksesta, jota ei ole vielä viimeistelty. Vaikka WebPack tukee sitä, ESLintin asetuksia (JavaScript Linting Tool), jota käytetään häiriöitä, ei ole päivitetty sisällyttämään tämän syntaksi vielä, mutta se toimii edelleen.

Viimeinen asia, jota meidän on tehtävä, on kirjoittaa lajitella Menetelmä tiedostomme lopussa. Tämän on oltava funktio palautettava toiminto, joka vie tuodun menetelmän Lodash.Sortby . Sisäkkäinen toiminto voi lajitella kolme syöttöarvoa ja päivittää DOM:

 Const Sortinput = () = & GT; {
  Paluu (sortby) = & gt; {
    const arvot = [
      Syötä1.Valueasnumer,
      INPUT2.VALUEASN lukumäärä,
      INPUT3.Valueasnumber
    ];
    const lajikkeet = sorby (arvot);
    tulokset.innerhtml = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / h2 & gt;
    "
  };
} 

Seuraa numeroita

Letemme nyt lataa sovellus viime kerralla ja pidä silmäpaneelin silmäpaneelin silmä. Huomaa, kuinka vain pieni alkupaketti ladataan, kun sovelluslataa. Kun painiketta napsautetaan, lajittele tulosiumukset, lajittelukoodin sisältävä skripti / chunk haetaan ja toteutetaan. Näetkö, kuinka numerot vielä lajitellaan, kun odotamme heidät?

JavaScript-koodin halkaisu ja laiska kuormitus voivat olla erittäin hyödyllisiä sovelluksen tai sivuston alkuperäisen nipun kokoonpanon lopettamiseksi. Tämä voi johtaa suoraan käyttäjien nopeampaan sivun latausaikoihin. Vaikka olemme katsoneet koodin jakamista Vanilla JavaScript -sovellukseen, voit myös soveltaa sitä sovelluksiin, jotka on rakennettu kirjastoihin tai kehyksiin.

Lazy-kuormitus JavaScript-kirjastolla tai kehyksellä

Paljon suosittuja puitteita tukee koodin jakamista ja laiska kuormitusta käyttäen dynaamista tuontia ja webpackia.

Näin voit lazel-ladata elokuvan "Kuvaus" -komponentti reagoivalla ( React.lazy () ja niiden jännitysominaisuus) tarjota "lastaus ..." Walkback, kun komponentti on laiska ladattu (katso tässä Joitakin lisätietoja):

 Tuonti reagoi, {jännitys} "reagoi";
cont draction = reagoi.laze (() = & gt; tuonti ('./ Kuvaus'));
Toiminto App () {
  Paluu (
    & lt; div & gt;
      & lt; h1 & gt; minun elokuva & lt; / h1 & gt;
      & lt; suspense fallback = "Ladataan ..." & gt;
        & lt; kuvaus / & gt;
      & lt; / suspense & gt;
    & lt; / div & gt;
  );
} 

Koodin halkaisu voi auttaa vähentämään JavaScriptin vaikutusta käyttäjäkokemuksellesi. Ehdottomasti harkita sitä, jos sinulla on suurempia JavaScript-nippuja ja epäilemättä älä unohda mitata, optimoida ja seurata.

Tämä artikkeli julkaistiin alun perin 317 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 317 täällä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

• 9 parhaista JavaScript-kehyksistä
• 15 Essential JavaScript -työkalut sinun pitäisi käyttää
• 14 parhaista JavaScript Apis