Mindössze annyit kell tudnia a JavaScript kódfelosztásról

JavaScript kód felosztása

A modern webhelyek gyakran összevonják az összes JavaScript-jüket egyetlen, nagy méretben main.js forgatókönyv. Ez rendszeresen tartalmazza az összes oldal vagy útvonal szkriptjét, még akkor is, ha a felhasználóknak csak egy kis részre van szükségük a megtekintett oldalhoz.

Ha a JavaScript ilyen módon kerül kiszolgálásra, akkor a weblapok betöltési teljesítménye károsodhat - különösen a reszponzív webdesign mobil eszközökön. Tehát javítsuk ki a JavaScript kódfelosztás végrehajtásával.

  • Gyorsabb és könnyebb JavaScript kódolása

Milyen problémát old meg a kódfelosztás?

Amikor egy webböngésző meglátja a időt kell töltenie a hivatkozott JavaScript letöltésével és feldolgozásával. Ez gyorsan érezhető csúcskategóriás eszközökön, de a fel nem használt JavaScript-kód betöltése, elemzése és végrehajtása átlagosan eltarthat egy lassabb hálózattal és lassabb CPU-val rendelkező mobileszközökön. Ha valaha is be kellett jelentkeznie a kávézóba vagy a szálloda WiFi-jébe, akkor tudja, hogy lassú hálózati tapasztalatok mindenkivel megtörténhetnek.



Minden egyes másodperc, amelyet a JavaScript várakozással töltött az indítás befejezéséért, késleltetheti, hogy a felhasználók milyen gyorsan tudnak interakcióba lépni az Ön tapasztalatával. Ez különösen akkor áll fenn, ha az UX a JS-re támaszkodik a kritikus összetevőknél, vagy akár csak az eseménykezelőket csatolja az egyszerű felhasználói felület darabjaihoz.

Fáradnom kell a kódfelosztással?

Mindenképpen érdemes feltenni magának a kérdést, hogy kell-e kódot osztani (ha egyszerût használt weboldal készítő valószínűleg nem). Ha webhelyének interaktív tartalomhoz JavaScriptre van szüksége (olyan funkciókhoz, mint a menüfiókok és a körhinta), vagy egyoldalas alkalmazás, amely a felhasználói felület megjelenítéséhez a JavaScript keretrendszerekre támaszkodik, a válasz valószínűleg „igen”. Arra érdemes választ adnia, hogy a kód felosztása érdemes-e webhelye számára. Megértette az architektúráját és azt, hogy webhelye hogyan töltődik be a legjobban. Szerencsére elérhető eszközök állnak rendelkezésre itt. Ne feledje, hogy ha módosításokat hajt végre az egész tervezési rendszerben, mentse ezeket a módosításokat a megosztottba felhőtároló hogy a csapata láthassa.

Kaphat segítséget

Azok számára, akik újak a JavaScript kódfelosztásban, Világítótorony - a Chrome Developer Tools Audit panelje - segíthet megvilágítani, hogy ez problémát jelent-e az Ön webhelyén. Az audit, amelyet meg akar keresni, a JavaScript végrehajtási idejének csökkentése (dokumentálva itt ). Ez az ellenőrzés kiemeli az oldal összes szkriptjét, ami késleltetheti a felhasználó interakcióját.

PageSpeed ​​Insights egy olyan online eszköz, amely kiemelheti webhelye teljesítményét - és tartalmazza a Világítótorony laboratóriumi adatait, valamint a webhely felhasználói teljesítményének valós adatait a Chrome felhasználói élmény jelentésből. A ti webtárhely a szolgáltatásnak más lehetőségei is lehetnek.

Kód lefedettség a Chrome fejlesztői eszközökben

Ha úgy tűnik, hogy költséges szkriptjei vannak, amelyeket jobban fel lehet osztani, akkor a következő eszköz, amelyet meg kell vizsgálni, a Code Developage szolgáltatás a Chrome fejlesztői eszközökben (DevTools> jobb felső menü> További eszközök> Lefedettség). Ez méri, hogy mennyi nem használt JavaScript (és CSS) van az oldalon. Minden egyes összefoglalt szkriptnél a DevTools megmutatja a 'fel nem használt bájtokat'. Ez egy olyan kód, amelyet fontolóra vehet a szétválasztás és a lusta betöltés, amikor a felhasználónak szüksége van rá.

A különféle kódfelosztás

Néhány különböző megközelítést alkalmazhat a JavaScript felosztásával. Az, hogy ezek mennyire vonatkoznak az Ön webhelyére, általában attól függően változik, hogy fel szeretné-e bontani az oldal / alkalmazás „logikáját”, vagy fel kell bontania más „szállítók” könyvtárait / kereteit.

Dinamikus kódfelosztás: Sokan statikusan importáljuk a JavaScript-modulokat és -függőségeket, így azokat összeállításkor egyetlen fájlba csomagolják. A „dinamikus” kódfelosztás lehetőséget ad arra, hogy olyan pontokat definiáljon a JavaScript-ben, amelyeket fel szeretne osztani és szükség szerint lustán betölteni. A modern JavaScript a dinamikát használja import () nyilatkozatot ennek elérésére. Rövidesen kitérünk erre.

Szállító kód felosztása: Azok a keretrendszerek és könyvtárak, amelyekre támaszkodnak (pl. React, Angular, Vue vagy Lodash), valószínűleg nem fognak megváltozni a felhasználóknak küldött szkriptekben, gyakran a webhely logikájaként. A gyorsítótár-érvénytelenítés negatív hatásainak csökkentése érdekében az Ön webhelyére visszatérő felhasználók számára külön szkriptre oszthatja „szállítóit”.

Belépési pont felosztása: A bejegyzések a webhely vagy alkalmazás kezdőpontjai, amelyeket egy olyan eszköz, mint a Webpack, megnézhet a függőségi fa felépítéséhez. A bejegyzésekkel történő felosztás hasznos azoknál az oldalaknál, ahol az ügyféloldali útválasztást nem használják, vagy ha a kiszolgáló és az ügyféloldali megjelenítés kombinációjára támaszkodik.

Ebben a cikkünkben a dinamikus kódfelosztásra fogunk koncentrálni.

Kezelje a kódfelosztást

Optimalizáljuk az a JavaScript teljesítményét egyszerű alkalmazás, amely három számot rendez kódfelosztással - ez egy kollégám, Houssein Djirdeh alkalmazás. A JavaScript gyors betöltéséhez használt munkafolyamat mérése, optimalizálása és figyelése. Kezdd itt .

Teljesítmény mérése

Mielőtt bármilyen optimalizálást hozzáadna, először meg kell mérnünk a JavaScript teljesítményét. Mivel a mágikus válogató alkalmazást a Glitch tárolja, a kódolási környezetét fogjuk használni. Így kell eljárni:

  • Kattintson a Show Live gombra.
  • Nyissa meg a DevTools eszközt a CMD + OPTION + i / CTRL + SHIFT + i megnyomásával.
  • Válassza a Hálózat panelt.
  • Győződjön meg róla, hogy a Gyorsítótár letiltása be van jelölve, és töltse be újra az alkalmazást.

Úgy tűnik, hogy ez az egyszerű alkalmazás 71,2 KB JavaScript-et használ csak néhány szám rendezéséhez. Ez bizony nem tűnik helyesnek. Forrásunkban src / index.js , a Lodash segédprogram könyvtár importálva van, és használjuk rendezés - egyik válogató segédprogramja - a számok rendezése érdekében. A Lodash számos hasznos funkciót kínál, de az alkalmazás csak egyetlen módszert használ belőle. Gyakori hiba az összes harmadik féltől származó függőség telepítése és importálása, amikor valójában csak annak egy kis részét kell használnia.

Optimalizálja a csomagot

A JavaScript-csomag méretének levágásához néhány lehetőség áll rendelkezésre:

  1. Írjon egyéni rendezési módszert ahelyett, hogy harmadik fél könyvtárára támaszkodna.
  2. Használat Array.prototype.sort () , amely a böngészőbe van építve.
  3. Csak a rendezés módszer a Lodash-tól az egész könyvtár helyett.
  4. Rendezéshez csak akkor töltse le a kódot, amikor a felhasználónak szüksége van rá (amikor egy gombra kattint).

Az 1. és a 2. lehetőség alkalmas a csomagméret csökkentésére - ezeknek valószínűleg van értelme egy valódi alkalmazáshoz. Tanítási célokból valami mást próbálunk ki. A 3. és 4. opció segít javítani az alkalmazás teljesítményét.

Csak a szükséges kódot importálja

Néhány fájlt úgy módosítunk, hogy csak a single-t importálja rendezés módszerre van szükségünk a Lodash-tól. Kezdjük azzal, hogy kicseréljük páholy függőség ben csomag.json :

'lodash': '^4.7.0',

ezzel:

'lodash.sortby': '^4.7.0',

Az src / index.js fájlba importáljuk ezt a specifikusabb modult:

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

Ezután frissítjük az értékek rendezésének módját:

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}

` });

Töltse be újra a mágikus számok alkalmazást, nyissa meg a Fejlesztői eszközöket, és nézze meg újra a Hálózat panelt. Ehhez a konkrét alkalmazáshoz a csomagméretünk néggyel csökkent, kevés munkával. De még mindig van mit javítani.

JavaScript kód felosztása

A Webpack az egyik legnépszerűbb JavaScript-modulcsomag, amelyet a webfejlesztők ma használnak. Az összes JavaScript-modult és egyéb eszközt statikus fájlokká egyesíti (egyesíti) a webböngészők.

Az alkalmazás egyetlen csomagja két külön szkriptre osztható:

  • Az egyik felelős a kezdeti útvonal kódjának elkészítéséért.
  • Egy másik tartalmazza a rendezési kódunkat.

Dinamikus importálás használata (a import () kulcsszó), egy második szkript igény szerint lustán betölthető. Mágikus számok alkalmazásunkban a szkriptet alkotó kód szükség szerint betölthető, amikor a felhasználó rákattint a gombra. Kezdjük azzal, hogy eltávolítjuk a rendezési módszer legfelső szintű importálását src / index.js :

import sortBy from 'lodash.sortby';

Importálja azt az eseményfigyelőbe, amely a gombra kattintva aktiválódik:

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

Ez a dinamika import () Az általunk használt funkció egy standardstrack javaslat része, amely tartalmazza a modul dinamikus importálásának lehetőségét a JavaScript nyelvi szabványban. A Webpack már támogatja ezt a szintaxist. További információ a dinamikus import működéséről ebben a cikkben .

A import () utasítás az ígéretet adja vissza, amikor megoldódik. A Webpack ezt megosztott pontnak tekinti, amelyet külön szkriptvé (vagy darabokká) bont ki. Miután a modult visszaadta, a modul.default az alapértelmezett exportálás hivatkozására szolgál páholy . Az Ígéret egy másikkal van láncolva .azután() hívás a sortInput módszer a három bemeneti érték rendezéséhez. Az Ígéret lánc végén, .fogás() felkérik, hogy kezelje az ígéretet egy hiba eredményeként.

Valódi gyártási alkalmazások esetén megfelelően kezelnie kell a dinamikus importálási hibákat. Az egyszerű figyelmeztető üzenetek (hasonlóak az itt használtakhoz) azok, amelyeket használnak, és nem biztos, hogy a legjobb felhasználói élményt nyújtják a felhasználók tudomására hozatalában.

Abban az esetben, ha olyan szöszös hibát lát, mint például: „Elemzési hiba: az importálás és exportálás csak a legfelső szinten jelenhet meg”, vegye figyelembe, hogy ez annak a dinamikus import szintaxisnak a véglegesítése miatt van. Bár a Webpack támogatja, a Glitch által használt ESLint (JavaScript szöszmotoráló eszköz) beállításait még nem frissítették, hogy tartalmazzák ezt a szintaxist, de még mindig működik.

Az utolsó dolog, amit meg kell tennünk, az a sortInput módszer a fájlunk végén. Ennek egy olyan függvénynek kell lennie, amely egy olyan függvényt ad vissza, amely az importált metódust veszi fel a lodash.sortBy . A beágyazott függvény képes rendezni a három bemeneti értéket és frissíteni a DOM-ot:

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

${sortedValues}

` }; }

Figyelje a számokat

Töltsük be még egyszer utoljára az alkalmazást, és figyeljük szorosan a Hálózat panelt. Észre kell vennie, hogy az alkalmazás betöltésekor csak egy kis kezdeti csomag kerül letöltésre. Miután rákattintott a gombra a beviteli számok rendezéséhez, a rendezési kódot tartalmazó szkript / darab beolvasásra és végrehajtásra kerül. Látja, hogyan rendeződnek a számok továbbra is úgy, ahogy azt elvárnánk tőlük?

A JavaScript-kód felosztása és a lusta betöltés nagyon hasznos lehet az alkalmazás vagy webhely kezdeti csomagméretének csökkentéséhez. Ez közvetlenül az oldalak gyorsabb betöltési idejét eredményezheti a felhasználók számára. Bár megvizsgáltuk a kódfelosztás hozzáadását egy vanília JavaScript alkalmazáshoz, alkalmazhatjuk könyvtárakkal vagy keretekkel felépített alkalmazásokra is.

Lusta betöltés JavaScript könyvtárral vagy keretrendszerrel

Sok népszerű keretrendszer támogatja a kódfelosztás és a lusta betöltést a dinamikus importálás és a Webpack használatával.

A React (with. Használatával lustán betöltheti a film 'leírás' komponensét React.lazy () és a Felfüggesztés funkciójuk), hogy a „Betöltés…” tartalékot biztosítsák, miközben az alkatrészt lustán töltik be (lásd itt további részletekért):

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

My Movie

); }

A kódfelosztás segíthet csökkenteni a JavaScript hatását a felhasználói élményre. Feltétlenül fontolja meg, ha nagyobb JavaScript csomagokkal rendelkezik, és ha kétségei vannak, ne felejtse el mérni, optimalizálni és figyelni.

Ezt a cikket eredetileg a 2003 háló , a világ legkeresettebb weblaptervezőknek és -fejlesztőknek szóló magazinja. Vásárolja meg a 317. számot itt vagy iratkozzon fel ide .

Kapcsolódó cikkek: