Kõik, mida peate teadma JavaScripti koodi jagamise kohta

JavaScripti koodi jagamine

Kaasaegsed saidid ühendavad sageli kogu oma JavaScripti üheks suureks main.js stsenaarium. See sisaldab regulaarselt kõigi teie lehtede või marsruutide skripte, isegi kui kasutajad vajavad vaadatava lehe jaoks ainult väikest osa.

Kui JavaScripti sellisel viisil serveeritakse, võib teie veebilehtede laadimise jõudlus kannatada - eriti tundlik veebidisain mobiilseadmetes. Parandame selle JavaScripti koodi jagamise abil.

  • Kuidas kiiremini ja kergemini JavaScripti kodeerida

Mis probleemi lahendab koodi jagamine?

Kui veebibrauser näeb a see peab kulutama aega viidatava JavaScripti allalaadimisele ja töötlemisele. See võib end tipptasemel seadmetes kiiresti tunda, kuid kasutamata JavaScripti koodi laadimine, parsimine ja käivitamine võib keskmiselt aeglasema võrgu ja aeglasema protsessoriga mobiilseadmete jaoks aega võtta. Kui olete kunagi pidanud kohvikusse või hotelli WiFi-sse sisse logima, teate, et aeglaseid võrgukogemusi võib juhtuda kõigil.

Iga sekund, mis kulus käivitamise lõpetamiseks JavaScripti ootamisele, võib edasi lükata, kui kiiresti saavad kasutajad teie kogemusega suhelda. See kehtib eriti juhul, kui teie kasutajaliides tugineb kriitiliste komponentide jaoks JS-ile või lihtsalt liidese liideste jaoks sündmuste käitlejate kinnitamisele.

Kas pean viitsima koodi jagamisega?

Kindlasti tasub endalt küsida, kas peate koodi jagama (kui olete kasutanud lihtsat veebisaidi ehitaja tõenäoliselt ei tee). Kui teie sait nõuab interaktiivse sisu jaoks JavaScripti (selliste funktsioonide jaoks nagu menüüsahtlid ja karussellid) või kui see on ühe lehega rakendus, mis tugineb kasutajaliidese renderdamiseks JavaScripti raamistikele, on vastus tõenäoliselt jah. Kas koodi jagamine on teie saidi jaoks väärt, on küsimus, millele peate ise vastama. Mõistate oma arhitektuuri ja seda, kuidas teie saiti kõige paremini laaditakse. Õnneks on siin teie abistamiseks saadaval tööriistu. Pidage meeles, et kui rakendate muudatusi kogu kujundussüsteemis, salvestage need muudatused jagatud kausta pilvemälu nii et teie meeskond näeb.

Hankige abi

Neile, kes on JavaScripti koodi jagamine uued, Tuletorn - Chrome'i arendaja tööriistade paneel Auditid - aitab valgustada, kas see on teie saidi probleem. Audit, mida soovite otsida, on JavaScripti täitmisaja vähendamine (dokumenteeritud siin ). See audit tõstab esile kõik teie lehe skriptid, mis võivad kasutajaga suhtlemist edasi lükata.

PageSpeed ​​Insights on veebitööriist, mis võib esile tõsta ka teie saidi toimivust - ning sisaldab majaka laboriandmeid ja Chrome'i kasutajakogemuse aruandest pärinevaid andmeid teie saidi toimivuse kohta. Teie veebimajutus teenusel võib olla muid võimalusi.

Koodi katvus Chrome'i arendaja tööriistades

Kui näib, et teil on kulukaid skripte, mida saaks paremini jagada, on järgmine tööriist, mida vaadata, Chrome'i arendaja tööriistade koodikate funktsioon (DevTools> paremas ülanurgas olev menüü> Veel tööriistu> Katvus). See mõõdab, kui palju teie lehel on kasutamata JavaScripti (ja CSS-i). Iga kokkuvõtliku skripti korral kuvab DevTools 'kasutamata baidid'. See on kood, mida võite kaaluda lahutamiseks ja laiskaks laadimiseks, kui kasutaja seda vajab.

Erinevad koodijagamised

JavaScripti koodilõhestamisel on mõned erinevad lähenemisviisid. Kui palju need teie saidil kehtivad, võib see varieeruda sõltuvalt sellest, kas soovite lehe / rakenduse loogika või teistest teenusepakkujatest teegid / raamistikud jagada.

Dünaamiline koodi jagamine: Paljud meist 'staatiliselt' impordivad JavaScripti mooduleid ja sõltuvusi nii, et need koondatakse ehitamise ajal ühte faili. Dünaamiline koodi jagamine lisab võimaluse määratleda oma JavaScripti punktid, mida soovite jagada ja laisalt laadida vastavalt vajadusele. Kaasaegne JavaScript kasutab dünaamikat import () avaldus selle saavutamiseks. Me käsitleme seda lähiajal.

Pakkuja koodi jagamine: Raamid ja teegid, millele toetute (nt React, Angular, Vue või Lodash), tõenäoliselt ei muutu teie kasutajatele saadetud skriptides, sageli teie saidi loogikana. Teie saidile naasvate kasutajate vahemälu kehtetuks tunnistamise negatiivse mõju vähendamiseks võite jagada oma „teenusepakkujad” eraldi skriptiks.

Sisendpunkti koodi jagamine: Kirjed on teie saidi või rakenduse lähtepunktid, mida selline tööriist nagu Webpack saab teie sõltuvuspuu loomiseks vaadata. Kandide järgi jagamine on kasulik lehtede jaoks, kus kliendipoolset marsruutimist ei kasutata või tuginete serveri ja kliendipoolse renderdamise kombinatsioonile.

Selles artiklis keskendume koodide dünaamilisele jagamisele.

Koodijagamisega saate hakkama

Optimeerime a-i JavaScripti jõudlust lihtne rakendus, mis sorteerib kolm numbrit koodi jagamise kaudu - see on minu kolleegi Houssein Djirdehi rakendus. Töövoog, mida kasutame JavaScripti kiireks laadimiseks, on mõõtmine, optimeerimine ja jälgimine. Alusta siit .

Mõõtke jõudlust

Enne optimeerimiste lisamist proovime kõigepealt oma JavaScripti toimivust mõõta. Kuna võlusorteerija rakendus on hostitud Glitchis, siis kasutame selle kodeerimiskeskkonda. Selle jätkamiseks toimige järgmiselt.

  • Klõpsake nuppu Kuva otseülekanne.
  • DevToolsi avamiseks vajutage klahve CMD + OPTION + i / CTRL + SHIFT + i.
  • Valige paneel Võrk.
  • Veenduge, et valik Keela vahemälu oleks märgitud, ja laadige rakendus uuesti.

Tundub, et see lihtne rakendus kasutab 71,2 KB JavaScripti lihtsalt mõne numbri sortimiseks. See ei tundu kindlasti õige. Meie allikas src / index.js , Lodashi utiliitraamatukogu imporditakse ja me kasutame seda sorteerima - üks selle sortimisutiliitidest - meie numbrite sortimiseks. Lodash pakub mitmeid kasulikke funktsioone, kuid rakendus kasutab sellest ainult ühte meetodit. Kogu kolmanda osapoole sõltuvuse installimine ja importimine on tavaline viga, kui tegelikult peate kasutama vaid väikest osa sellest.

Optimeerige oma kimp

Meie JavaScripti kimbu suuruse kärpimiseks on saadaval mõned võimalused:

  1. Kolmanda osapoole teegile lootmise asemel kirjutage kohandatud sortimismeetod.
  2. Kasutage Array.prototype.sort () , mis on sisse ehitatud brauserisse.
  3. Importige ainult sorteerima meetod kogu raamatukogu asemel Lodashilt.
  4. Laadige kood sortimiseks alla ainult siis, kui kasutaja seda vajab (kui klõpsab nuppu).

Meie paketi suuruse vähendamiseks sobivad valikud 1 ja 2 - need on tõenäoliselt reaalse rakenduse jaoks mõttekad. Õpetamise eesmärgil proovime midagi muud. Valikud 3 ja 4 aitavad rakenduse toimivust parandada.

Importige ainult vajalik kood

Muudame mõningaid faile ainult singli importimiseks sorteerima meetodit, mida vajame Lodashilt. Alustame oma asendamisest lodža sõltuvus aastal pakett.json :

'lodash': '^4.7.0',

sellega:

'lodash.sortby': '^4.7.0',

Rakenduses src / index.js impordime selle täpsema mooduli:

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

Järgmisena värskendame väärtuste sortimist:

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}

` });

Laadige uuesti võlunumbrite rakendus, avage arendaja tööriistad ja vaadake uuesti võrgu paneeli. Selle konkreetse rakenduse puhul vähendati meie kimpu vähese tööga nelja skaala võrra. Kuid arenguruumi on veel palju.

JavaScripti koodi jagamine

Webpack on üks populaarsemaid JavaScripti moodulite kogumeid, mida veebiarendajad tänapäeval kasutavad. See 'ühendab' (ühendab) kõik teie JavaScripti moodulid ja muud varud staatilisteks failideks, mida veebibrauserid saavad lugeda.

Selle rakenduse ühe komplekti saab jagada kaheks eraldi skriptiks:

  • Üks vastutab algse marsruudi moodustamise koodi eest.
  • Teine sisaldab meie sortimiskoodi.

Dünaamilise impordi kasutamine (koos import () märksõna), teise skripti saab nõudmisel laisalt laadida. Meie võlunumbrite rakenduses saab skripti moodustava koodi vastavalt vajadusele laadida, kui kasutaja nuppu klõpsab. Alustame sordimeetodi ülemise taseme impordi eemaldamisega src / index.js :

import sortBy from 'lodash.sortby';

Importige see sündmuste kuulaja sisse, mis käivitub nupu klõpsamisel:

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

See dünaamiline import () meie kasutatav funktsioon on osa standardstracki ettepanekust mooduli dünaamilise importimise võimaluse lisamiseks JavaScripti keelestandardisse. Webpack juba toetab seda süntaksit. Lisateavet selle kohta, kuidas dünaamiline import toimib selles artiklis .

The import () lause tagastab lubaduse, kui see lahendatakse. Webpack peab seda jagatud punktiks, mis jaguneb eraldi skriptiks (või tükiks). Kui moodul on tagastatud, kuvatakse moodul.default kasutatakse viitamiseks vaikepõhisele ekspordile lodža . Tõotus on aheldatud teisega .siis () helistamine a sortInput meetod kolme sisendväärtuse sortimiseks. Promise keti lõpus .catch () kutsutakse üles käituma seal, kus lubadus vea tõttu tagasi lükatakse.

Päris tootmisrakendustes peaksite dünaamilisi importimisvigu asjakohaselt käsitsema. Lihtsad hoiatusteated (sarnased siin kasutatuga) on need, mida kasutatakse ja mis ei pruugi pakkuda parimat kasutuskogemust, et anda kasutajatele teada, et midagi on valesti läinud.

Juhul, kui näete nipsutamisviga nagu „Parsimisviga: importimine ja eksportimine võivad ilmuda ainult kõige kõrgemal tasemel”, teadke, et see on tingitud sellest, et dünaamiline impordisüntaks pole veel lõpule viidud. Kuigi Webpack toetab seda, pole Glitchi kasutatud ESLinti (JavaScripti kiirtööriist) sätteid selle süntaksi lisamiseks veel värskendatud, kuid see töötab siiski.

Viimane asi, mida peame tegema, on kirjutada sortInput meetod meie faili lõpus. See peab olema funktsioon, mis tagastab funktsiooni, mis võtab sisse imporditud meetodi lodash.sortBy . Pesastatud funktsioon võib sorteerida kolm sisendväärtust ja värskendada DOM-i:

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

${sortedValues}

` }; }

Jälgige numbreid

Nüüd laadime rakenduse viimast korda uuesti ja jälgime võrgu paneeli. Peaksite märkama, kuidas rakenduse laadimisel laaditakse alla ainult väike esialgne kogum. Pärast seda, kui sisendnumbrite sortimiseks nupul klõpsatakse, tuuakse ja käivitatakse sortimiskoodi sisaldav skript / jupp. Kas näete, kuidas numbrid ikka järjestatakse nii, nagu me neid eeldaksime?

JavaScripti koodi jagamine ja laisk laadimine võivad olla väga kasulikud teie rakenduse või saidi esialgse kogumi vähendamiseks. See võib otseselt põhjustada kasutajate kiiremat lehe laadimisaega. Ehkki oleme vaadanud koodi jagamise lisamist vanilje JavaScripti rakendusele, saate seda rakendada ka teekide või raamistikega ehitatud rakenduste suhtes.

Laisk laadimine JavaScripti teegi või raamistikuga

Paljud populaarsed raamistikud toetavad koodi jagamise ja laisklaadimise lisamist dünaamilise impordi ja Webpacki abil.

Siit saate teada, kuidas filmi „kirjeldus” komponenti laisk laadida React (kasutades Reageeri. Laisk () ja nende peatamise funktsioon), et pakkuda varukoopiat 'Laadimine ...' komponendi laadimise ajal (vt siin lisateabe saamiseks):

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

My Movie

); }

Koodi jagamine aitab vähendada JavaScripti mõju teie kasutuskogemusele. Kindlasti kaaluge seda, kui teil on suuremad JavaScripti paketid ja kui teil on kahtlusi, ärge unustage mõõta, optimeerida ja jälgida.

See artikkel avaldati algselt väljaande 317 numbris võrk , maailma enimmüüdud ajakiri veebidisaineritele ja -arendajatele. Osta väljaanne 317 siit või telli siin .

Seotud artiklid: