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

JavaScript-koodin jakaminen

Nykyaikaiset sivustot yhdistävät usein kaiken JavaScriptin yhdeksi suureksi main.js käsikirjoitus. Tämä sisältää säännöllisesti kaikkien sivujen tai reittien komentosarjat, vaikka käyttäjät tarvitsevat vain pienen osan katselemalleen sivulle.

Kun JavaScriptiä palvellaan tällä tavoin, verkkosivujen latautumiskyky voi kärsiä - etenkin reagoiva web-suunnittelu mobiililaitteissa. Joten korjataan se toteuttamalla JavaScript-koodin jakaminen.



  • Kuinka koodata nopeammin, kevyemmin JavaScript

Mikä ongelma koodin jakaminen ratkaisee?

Kun verkkoselain näkee sen on käytettävä aikaa viemäsi JavaScriptin lataamiseen ja käsittelyyn. Tämä voi tuntua nopeasti huippuluokan laitteilta, mutta käyttämättömän JavaScript-koodin lataaminen, jäsentäminen ja suorittaminen voi kestää jonkin aikaa keskimäärin hitaamman verkon ja hitaamman suorittimen sisältävissä mobiililaitteissa. Jos joudut koskaan kirjautumaan sisään kahvilaan tai hotellin WiFi-verkkoon, tiedät, että hitaita verkkokokemuksia voi tapahtua kaikille.



Jokainen sekunti, joka vietettiin odottamaan JavaScriptiä käynnistymisen loppuun saattamiseksi, voi viivästyttää sitä, kuinka pian käyttäjät voivat olla vuorovaikutuksessa kokemuksesi kanssa. Tämä pätee erityisesti, jos käyttöliittymäsi luottaa JS: ään kriittisten komponenttien suhteen tai jopa vain liittää tapahtumankäsittelijöitä yksinkertaisille käyttöliittymäkappaleille.

paras kannettava tietokone 3D-mallinnukseen ja renderointiin 2019

Pitääkö minun vaivautua koodin jakamiseen?

On ehdottomasti syytä kysyä itseltäsi, tarvitseeko koodinjakoa (jos olet käyttänyt yksinkertaista verkkosivujen rakentaja luultavasti et). Jos sivustosi vaatii JavaScriptiä interaktiiviselle sisällölle (esimerkiksi valikkolaatikoille ja karuselleille) tai se on yhden sivun sovellus, joka käyttää JavaScript-kehyksiä käyttöliittymän hahmontamiseen, vastaus on todennäköisesti kyllä. Onko koodin jakaminen kannattavaa sivustollesi, on kysymys, johon sinun on vastattava itsellesi. Ymmärrät arkkitehtuurisi ja kuinka sivustosi latautuu parhaiten. Onneksi täällä on käytettävissä työkaluja. Muista, että jos toteutat muutoksia koko suunnittelujärjestelmässäsi, tallenna muutokset jaettuun pilvitallennus jotta joukkueesi näkisi.



Hae apua

Niille, jotka ovat aloittaneet JavaScript-koodin jakamisen, Majakka - Chrome-kehittäjätyökalujen tarkastuspaneeli - voi auttaa valaisemaan, onko tämä ongelma sivustollesi. Tarkastus, jonka haluat etsiä, on vähentää JavaScriptiä suoritusaikaa (dokumentoitu tässä ). Tämä tarkastus korostaa kaikkia sivusi komentosarjoja, jotka voivat viivästyttää käyttäjän vuorovaikutusta sen kanssa.

PageSpeed ​​Insights on verkkotyökalu, joka voi myös korostaa sivustosi suorituskykyä - ja sisältää laboratoriotiedot majakasta ja tosielämän tiedot sivustosi suorituskyvystä Chrome-käyttäjäkokemusraportista. Sinun sivujen ylläpito palvelulla voi olla muita vaihtoehtoja.

Koodin peitto Chrome-kehittäjän työkaluissa

Jos näyttää siltä, ​​että sinulla on kalliita komentosarjoja, jotka voidaan jakaa paremmin, seuraava tarkasteltava työkalu on Chrome-kehittäjätyökalujen Code Coverage -ominaisuus (DevTools> oikean yläkulman valikko> Lisää työkaluja> Kattavuus). Tämä mittaa käyttämättömän JavaScriptin (ja CSS: n) määrän sivullasi. DevTools näyttää jokaisen yhteenvedetyn komentosarjan 'käyttämättömät tavut'. Tämä on koodi, jonka voit harkita jakamista ja laiska lataamista, kun käyttäjä sitä tarvitsee.



Erilaiset koodinjaot

On olemassa muutama erilainen lähestymistapa, kun on kyse koodin jakamisesta JavaScriptille. Se, kuinka paljon nämä koskevat sivustoasi, vaihtelee yleensä sen mukaan, haluatko jakaa sivun / sovelluksen logiikan vai jakaa kirjastot / kehykset muilta toimittajilta.

Dynaaminen koodin jakaminen: Monet meistä 'staattisesti' tuovat JavaScript-moduuleja ja riippuvuuksia siten, että ne niputetaan yhteen tiedostoon rakennuksen aikana. Dynaaminen koodin jakaminen lisää mahdollisuuden määritellä JavaScriptissä pisteet, jotka haluat jakaa ja laiskata tarvittaessa. Moderni JavaScript käyttää dynaamista tuonti() lausunto tämän saavuttamiseksi. Käsittelemme tämän lyhyesti.

Toimittajan koodin jakaminen: Kehykset ja kirjastot, joihin luotat (esim. React, Angular, Vue tai Lodash), eivät todennäköisesti muutu käyttäjille lähettämissäsi komentosarjoissa, usein sivustosi logiikkana. Voit vähentää välimuistin mitätöinnin kielteisiä vaikutuksia sivustoosi palaaville käyttäjille jakamalla toimittajat erilliseen komentosarjaan.

Lähtökohdan koodin jakaminen: Merkinnät ovat sivustosi tai sovelluksesi lähtökohtia, joita Webpackin kaltainen työkalu voi tarkastella riippuvuuspuun luomiseksi. Jaottelu merkinnöistä on hyödyllistä sivuille, joissa asiakaspuolen reititystä ei käytetä tai luotat palvelimen ja asiakaspuolen hahmonnuksen yhdistelmään.

Tässä artikkelissa keskitymme dynaamiseen koodin jakamiseen.

Hanki käsiksi koodin jakaminen

Optimoidaan a: n JavaScript-suorituskyky yksinkertainen sovellus, joka lajittelee kolme numeroa koodin jakamisen kautta - tämä on kollegani Houssein Djirdehin sovellus. Työnkulku, jota käytämme JavaScriptin lataamiseen nopeasti, mittaa, optimoi ja seuraa. Aloita tästä .

Mittaa suorituskyky

Ennen kuin yritämme lisätä mitään optimointeja, aiomme ensin mitata JavaScriptin suorituskykyä. Koska maaginen lajittelusovellus on isännöity Glitchille, käytämme sen koodausympäristöä. Näin pääset eteenpäin:

kuinka käyttää MacBook Prota monitorina
  • Napsauta Näytä live-painiketta.
  • Avaa DevTools painamalla CMD + OPTION + i / CTRL + SHIFT + i.
  • Valitse Verkko-paneeli.
  • Varmista, että Poista välimuisti käytöstä on valittuna, ja lataa sovellus uudelleen.

Tämä yksinkertainen sovellus näyttää käyttävän 71,2 kt: n JavaScriptiä vain lajittelemaan muutaman numeron. Se ei todellakaan näytä oikealta. Lähteessämme src / index.js , Lodash-apuohjelmakirjasto tuodaan ja käytämme Järjestä - yksi sen lajitteluapuohjelmista - numeroiden lajittelemiseksi. Lodash tarjoaa useita hyödyllisiä toimintoja, mutta sovellus käyttää vain yhtä menetelmää siitä. On yleinen virhe asentaa ja tuoda kaikki kolmannen osapuolen riippuvuudet, vaikka itse asiassa sinun tarvitsee käyttää vain pieni osa siitä.

Optimoi nippusi

JavaScript-nipun koon leikkaamiseen on olemassa muutama vaihtoehto:

  1. Kirjoita mukautettu lajittelutapa sen sijaan, että luotat kolmannen osapuolen kirjastoon.
  2. Käyttää Array.prototype.sort () , joka on sisäänrakennettu selaimeen.
  3. Tuo vain Järjestä menetelmä Lodashilta koko kirjaston sijaan.
  4. Lataa koodi lajittelua varten vain, kun käyttäjä sitä tarvitsee (kun hän napsauttaa painiketta).

Vaihtoehdot 1 ja 2 sopivat nipun koon pienentämiseen - nämä ovat todennäköisesti järkeviä todelliselle sovellukselle. Opetustarkoituksiin aiomme kokeilla jotain erilaista. Vaihtoehdot 3 ja 4 auttavat parantamaan sovelluksen suorituskykyä.

Tuo vain tarvitsemasi koodi

Muutamme muutamia tiedostoja vain yhden tuontia varten Järjestä menetelmä, jota tarvitsemme Lodashilta. Aloitetaan korvaamalla meidän lodash riippuvuus vuonna package.json :

'lodash': '^4.7.0',

tämän kanssa:

'lodash.sortby': '^4.7.0',

Tuomme tämän tarkemman moduulin tiedostoon src / index.js:

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

Seuraavaksi päivitämme, kuinka arvot lajitellaan:

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}

` });

Lataa maaginen numero -sovellus uudelleen, avaa Kehittäjätyökalut ja katso uudelleen Verkko-paneelia. Tätä sovellusta varten pakettikokoa pienennettiin neljän asteikolla, jossa ei ollut paljon työtä. Mutta parantamisen varaa on vielä paljon.

JavaScript-koodin jakaminen

Webpack on yksi suosituimmista JavaScript-moduulipaketeista, joita verkkokehittäjät käyttävät nykyään. Se 'niputtaa' (yhdistää) kaikki JavaScript-moduulisi ja muut resurssit staattisiksi tiedostoiksi, joita verkkoselaimet voivat lukea.

Tämän sovelluksen yksittäinen paketti voidaan jakaa kahteen erilliseen komentosarjaan:

  • Yksi on vastuussa koodin muodostamisesta alkuperäiselle reitille.
  • Toinen sisältää lajittelukoodimme.

Dynaamisen tuonnin käyttäminen ( tuonti() avainsana), toinen komentosarja voidaan ladata laiskaksi tarvittaessa. Maagisten numeroiden sovelluksessamme komentosarjan muodostava koodi voidaan ladata tarpeen mukaan, kun käyttäjä napsauttaa painiketta. Aloitetaan poistamalla ylätason tuonti lajittelumenetelmälle src / index.js :

import sortBy from 'lodash.sortby';

Tuo se tapahtuman kuuntelijaan, joka käynnistyy, kun painiketta napsautetaan:

kuinka piirtää lohikäärmeen kasvot
form.addEventListener('submit', e => { e.preventDefault(); import('lodash.sortby') .then(module => module.default) .then(sortInput()) .catch(err => { alert(err) }); });

Tämä dynaaminen tuonti() käyttämämme ominaisuus on osa standardistrack-ehdotusta sisällyttää kyky tuoda moduuli dynaamisesti JavaScript-kielistandardiin. Webpack tukee jo tätä syntaksia. Voit lukea lisää siitä, miten dynaaminen tuonti toimii tässä artikkelissa .

tuonti() -lauseke palauttaa lupauksen, kun se ratkaistaan. Webpack pitää tätä jakopisteenä, että se hajoaa erilliseksi komentosarjoksi (tai osaksi). Kun moduuli on palautettu, module.default käytetään viittaamaan oletusvientiin, jonka tarjoaa lodash . Lupaus on ketjutettu toisen kanssa .sitten() soittaminen a sortInput menetelmä kolmen tuloarvon lajittelemiseksi. Promise-ketjun lopussa .ottaa kiinni() kutsutaan käsittelemään, missä lupa on hylätty virheen seurauksena.

Todellisissa tuotantosovelluksissa sinun tulee käsitellä dynaamiset tuontivirheet asianmukaisesti. Yksinkertaisia ​​hälytysviestejä (samanlaisia ​​kuin tässä käytetään) käytetään, eivätkä ne välttämättä tarjoa parasta käyttökokemusta kertoa käyttäjille, että jotain on mennyt pieleen.

Jos näet nukkuvirheen, kuten 'jäsentämisvirhe: tuonti ja vienti voivat näkyä vain ylimmällä tasolla', tiedä, että tämä johtuu siitä, että dynaamista tuontisyntaksia ei ole vielä viimeistelty. Vaikka Webpack tukee sitä, Glitchin käyttämiä ESLintin (JavaScript-nukkaustyökalun) asetuksia ei ole vielä päivitetty sisällyttämään tätä syntaksia, mutta se toimii edelleen.

Viimeinen asia, joka meidän on tehtävä, on kirjoittaa sortInput menetelmä tiedostomme lopussa. Tämän on oltava funktio, joka palauttaa funktion, joka ottaa tuodun menetelmän lodash.sortBy . Sisäkkäinen toiminto voi lajitella kolme tuloarvoa ja päivittää DOM:

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

${sortedValues}

` }; }

Seuraa numeroita

Ladataan nyt sovellus viimeinen kerta ja pidetään tarkasti Verkko-paneelia. Sinun tulisi huomata, kuinka vain pieni alkupaketti ladataan, kun sovellus latautuu. Kun painiketta on napsautettu lajitellaksesi syötetyt numerot, lajittelukoodin sisältävä komentosarja / osa haketaan ja suoritetaan. Näetkö, kuinka numerot lajitellaan edelleen niin kuin odotamme niiden olevan?

JavaScript-koodin jakaminen ja laiska lataaminen voivat olla erittäin hyödyllisiä sovelluksen tai sivuston alkuperäisen nippukoon pienentämisessä. Tämä voi suoraan johtaa käyttäjien nopeuttamaan sivun latausaikoja. Vaikka olemme tarkastelleet koodinjaon lisäämistä vaniljan JavaScript-sovellukseen, voit käyttää sitä myös kirjastoilla tai kehyksillä rakennettuihin sovelluksiin.

Laiska lataus JavaScript-kirjastolla tai kehyksellä

Monet suositut kehykset tukevat koodin jakamisen ja laiskan lataamisen lisäämistä dynaamisen tuonnin ja Webpackin avulla.

Näin voit ladata laiskasti elokuvan 'kuvaus' -komponentin React-toiminnolla ( Reagoi laiska () ja niiden Suspense-ominaisuus) 'Back…' -varauksen aikaansaamiseksi, kun komponenttia ladataan laiskasti (katso tässä lisätietoja):

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

My Movie

); }

Koodin jakaminen voi auttaa vähentämään JavaScriptin vaikutusta käyttökokemukseesi. Harkitse ehdottomasti sitä, jos sinulla on suurempia JavaScript-paketteja ja jos olet epävarma, älä unohda mitata, optimoida ja seurata.

Tämä artikkeli julkaistiin alun perin numerossa 317 netto , maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Osta numero 317 täältä tai tilaa täällä .



Aiheeseen liittyvät artikkelit: