Mindössze annyit kell tudnod, hogy a JavaScript kód felosztása

A modern helyszínek gyakran kombinálják az összes JavaScriptet egyetlen, nagyba main.js forgatókönyv. Ez rendszeresen tartalmazza az összes oldala vagy útvonalainak szkriptjeit, még akkor is, ha a felhasználóknak csak egy kis részre van szükségük a megtekintéshez.

Amikor a JavaScriptet ilyen módon szolgálják fel, a weboldalak betöltési teljesítménye szenvedhet - különösen a Érzékeny webdesign mobileszközökön. Tehát javítsuk meg a JavaScript kód felosztását.

• Hogyan kódolható gyorsabb, könnyebb JavaScript

Milyen probléma megoldja a kódolást?

Amikor egy webböngésző látja a & lt; script & gt; Az idő letöltését és feldolgozását kell töltenie a JavaScript-en. Ez gyorsan érzi magát a high-end eszközökön, de a fel nem használt JavaScript-kód betöltése, elemzése és végrehajtása átlagos mobileszközökön, lassabb hálózattal és lassabb CPU-val rendelkezik. Ha valaha is be kellett jelentkezned a kávézóba vagy a Hotel Wifi-re, tudod, hogy a lassú hálózati tapasztalatok mindenki számára megtörténhetnek.

Minden második, aki a JavaScript várakozását töltötte, hogy befejezze az indítás befejezését, késleltetheti, hogy a felhasználók hogyan tudnak kölcsönhatásba lépni az Ön tapasztalataival. Ez különösen akkor fordul elő, ha az UX a kritikus összetevőkre vonatkozó JS-re támaszkodik, vagy csak az Eseménykezelők csatolása az egyszerű ui darabokra.

Meg kell zavarnom a kódolást?

Határozottan érdemes megkérdezni magának, hogy kell-e kódolni (ha egy egyszerű weboldal építője Valószínűleg nem. Ha webhelye az interaktív tartalmakhoz JavaScript-t igényel (olyan funkciókhoz, mint a menü fiókok és karusszel), vagy egy olyan oldalas alkalmazás, amely a JavaScript keretrendszerre támaszkodik az UI-nek, a válasz valószínűleg "igen". Akár a kód felosztása érdemes a webhelyére, hogy válaszoljon magára. Megérted az építészetedet, és hogyan terheli a webhelyét. Szerencsére vannak olyan eszközök, amelyek segítenek Önnek itt. Ne feledje, hogy ha a tervezési rendszeren végzett változásokat végrehajtja, mentse el a megosztott változásokat felhő tároló Tehát a csapatod láthat.

Kaphat segítséget

Azoknak az újnak a JavaScript-kódnak, Világítótorony - A Chrome Developer Eszközök ellenőrzései - segíthet fény megvilágítani azt, hogy ez a probléma problémája. Az audit, amelyet keresni szeretne, csökkenti a JavaScript végrehajtási időt (dokumentált) itt ). Ez az ellenőrzés kiemeli az oldal összes szkriptjét, amely késleltetheti a vele kölcsönhatásba lépő felhasználót.

PÁLÁSOK INFORMÁCIÓK Online eszköz, amely kiemelheti a webhely teljesítményét is - és tartalmaz laboratóriumi adatokat a világítótorony és a valós adatok a webhely teljesítményéről a Chrome felhasználói élményjelentéséről. A ti web hosting A szolgáltatásnak más lehetőségei lehetnek.

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

Ha úgy néz ki, mintha költséges parancsfájl lenne, amely jobban megosztható, akkor a következő eszköz a Chrome Developer Eszközök Kód-fedezeti funkciója (DECTOOLS & GT; jobb felső menü & gt; több eszköz és gt; több eszköz). Ez azt jelenti, hogy mennyi fel nem használt JavaScript (és CSS) van az Ön oldalán. Minden egyes parancsfájl esetében a devtools megmutatja a "fel nem használt bájtokat". Ez az a kód, amelyet megítélhet, ha a felhasználónak szüksége van rá.

A különböző kódolási típusok

Van néhány különböző megközelítés, ha a JavaScript kódolási kódja. Mennyire vonatkoznak ezekre a webhelyére, függetlenül attól függően, hogy szeretné-e felosztani az oldal / alkalmazás logikáját, vagy osztja fel a könyvtárakat / kereteket más "gyártók".

Dinamikus kód megosztása: Sokan közülünk "statikusan" import JavaScript modul és függőség, hogy azokat egy fájlba ágyazják az építési idő alatt. A "Dinamikus" kódfelosztás hozzáteszi, hogy meghatározza a JavaScript pontjait, hogy szükség szerint szeretne megosztani és lusta terhelésre. A modern JavaScriptet a dinamikát használja import () nyilatkozat erre. Rövidebben lefedjük ezt.

Szállító kód felosztása: A keretek és könyvtárak (pl. Reagálás, szögletes, VUE vagy LOVASH) nem valószínű, hogy a felhasználókra küldött szkriptek változása gyakran a webhelyének "logikájához". A gyorsítótár érvénytelenítésének negatív hatásainak csökkentése a webhelyére visszatérő felhasználók számára, megoszthatja a "gyártók" külön parancsfájlba.

Belépési pont kód: A bejegyzések a webhelyén vagy az alkalmazásban található, hogy egy olyan eszköz, mint például a webepack, megnézheti a függőségi fát. Megosztásánál bejegyzés hasznos oldalak, ahol a kliens oldali útvonal nem használják, vagy ha támaszkodik kombinációja szerver és kliens oldali renderelés.

E cikk céljaira a dinamikus kód felosztására koncentrálunk.

Kövesse a kezét a kód megosztásával

Optimizáljuk a JavaScript teljesítményét a Egyszerű alkalmazás, amely három számot rendez A kód felosztása révén - ez egy alkalmazás az én kollégám, Houssein Djirdeh. A munkafolyamat, amelyet a JavaScript terhelésünk gyorsításához használunk, az MÉRET, Optimalizálás és a monitor. Kezdd itt .

Teljesítmény mérése

Mielőtt megpróbálnánk hozzáadni az optimalizációt, először mérni fogjuk a JavaScript teljesítményét. Mivel a Magic Sorter alkalmazás a Glitchen található, akkor a kódolási környezetet használja. Íme, hogyan kell menni róla:

• Kattintson az Élő gomb megjelenítése gombra.
• Nyissa meg a Devtools gombot a CMD + Opció + I / Ctrl + SHIFT + I gomb megnyomásával.
• Válassza ki a hálózati panelt.
• Győződjön meg róla, hogy a gyorsítótár letiltása és az alkalmazás újratöltése.

Úgy tűnik, hogy ez az egyszerű alkalmazás 71,2 kb JavaScript-ot használ, csak néhány számot rendezni. Ez biztosan nem tűnik helyesnek. A forrásunkban src / index.js , a Lodash Utility Könyvtárat importáljuk és használjuk rendezés - Az egyik válogató segédprogramja - a számok rendezéséhez. A Lodsh számos hasznos funkciót kínál, de az alkalmazás csak egyetlen módszert használ róla. Ez egy közös hiba, hogy telepítsen és importáljon valamennyi harmadik féltől függőséget, amikor ténylegesen csak egy kis részét kell használni.

Optimalizálja a csomagot

Van néhány lehetőség a JavaScript köteg méretének vágásához:

1. Írjon egyéni rendezési módszert, ahelyett, hogy a harmadik részkönyvtárra támaszkodna.
2. Használat Array.prototype.Sort () , amely a böngészőbe van beépítve.
3. Csak importálja a rendezés módszer az egész könyvtár helyett.
4. Csak töltse le a kódot válogatás, ha a felhasználó szüksége van rá (ha egy gombra).

Az 1. és 2. beállítások alkalmasak a köteg méretének csökkentésére - ezek valószínűleg értelme van egy igazi alkalmazásnak. A tanítási célokra kipróbálni fogunk valamit. A 3. és 4. beállítások segítenek az alkalmazás teljesítményének javításában.

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

Néhány fájlt módosítunk csak az egyetlen importálásához rendezés A Lodash-ból szükséges módszer. Kezdjük a mi helyettesítjük lárol függőség csomag.json :

"lodash": "^4.7.0",

ezzel:

"lodash.sortby": "^4.7.0",

Az SRC / index.js-ben importáljuk ezt a pontosabb modult:

 JS
import "./style.css";
Importálás _ "LOVERSH";
Importálás a "Lodash.Sortby" -tól; 

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

 JS
form.addeventlistener ("Küldés", e = & gt; {
  e.preventdefault ();
  CONST értékek = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  CONST SortedValues ​​= _.Sortby (értékek);
  const sortedvalues ​​= sortby (értékek);
  Eredmények.InnerHTML = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}); 

Reload The Magic Numbers App, nyissa meg a fejlesztői eszközöket, és nézze meg újra a hálózati panelt. Ehhez az adott alkalmazáshoz a kötegméretünk négy skálán csökkent, kevés munkával. De még mindig sok hely van a javuláshoz.

JavaScript kód felosztása

A Webpack az egyik legnépszerűbb JavaScript modul-bundler, amelyet ma a webfejlesztők használnak. Ez a "kötegek" (kombinálják) az összes JavaScript modulját és egyéb eszközeit statikus fájlokba lehet olvasni.

Az alkalmazás egyetlen kötege két külön parancsfájlra osztható:

• Az egyik felelős a kezdeti útvonalat alkotó kódért.
• Egy másik tartalmazza a rendezési kódot.

Dinamikus behozatal használata (a import () kulcsszó), egy második szkript lusta betölthető igény szerint. A Magic Numbers alkalmazásunkban a forgatókönyvet alkotó kód szükséges, ha a felhasználó rákattint a gombra. Elkezdjük eltávolítani a felső szintű behozatalt a rendezési módszerre src / index.js :

 Sortby behozatala a "Lodash.Sortby" -tól; 

Importálja azt az eseménytáblán belül, amely a gomb megnyomásakor tűzött ki:

form.addeventlistener ("Küldés", e = & gt; {
  e.preventdefault ();
  import ('lodash.sortby')
    .hen (modul = & gt; module.default)
    .hen (sortinput ())
    .catch (err = & gt; {riasztás (err)});
});

Ez a dinamika import () Jellemzője, amelyet a szabványtrack javaslat része, beleértve a modul dinamikus importálásának képességét a JavaScript nyelvi szabványban. A WebSack már támogatja ezt a szintaxist. További információ arról, hogy a dinamikus behozatal hogyan működik ebben a cikkben .

A import () A nyilatkozat megígéri az ígéretet, amikor megoldja. A weboldal úgy ítéli meg, hogy ez megosztott pontként megszakad, hogy egy külön parancsfájlba (vagy darabra) kitörjön. Miután a modul visszatért, a modul.default az alapértelmezett export hivatkozására szolgál lárol . Az ígéret egy másikval láncolva van .azután() a sortinput a három bemeneti érték rendezésére. Az ígéret lánc végén, .fogás() felkérik, hogy kezeljék, ahol az ígéretet hiba eredményeként elutasítják.

Valódi termelési alkalmazásokban megfelelően kell kezelnie a dinamikus import hibákat. Egyszerű riasztási üzenetek (hasonló az itt használt melyhez) használják, és nem biztosítják a legjobb felhasználói élményt, hogy a felhasználók tudják, hogy valami rosszul ment.

Abban az esetben, ha látsz egy linting hibát, mint a "elemzés hiba: az import és az export csak a felső szinten jelenhet meg", tudd, hogy ez a dinamikus behozatali szintaxis, amelyet még nem véglegesített. Bár a Webpack támogatja azt, az ESLINT (A JavaScript Linting eszköz) által használt beállítások (A JavaScript Linting eszköz) által használt beállításokat nem frissítették, hogy ezt a szintaxist még mindig működjön, de még mindig működik.

Az utolsó dolog, amit meg kell tennünk, írja a sortinput módszerünk végén. Ennek egy olyan függvénynek kell lennie, amely az importált módszerbe kerül Lodash.Sortby . A beágyazott funkció rendezheti a három bemeneti értéket, és frissíti a DOM-ot:

 const sortinput = () = & gt; {
  Visszatérés (sortby) = & gt; {
    CONST értékek = [
      input1.valueasnumber,
      input2.valueasnumber,
      input3.valueasnumber
    ];
    const sortedvalues ​​= sortby (értékek);
    Eredmények.InnerHTML = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

Figyelemmel kíséri a számokat

Most újratöltsük az alkalmazást egy utolsó alkalommal, és tartsuk meg a hálózati panel szoros szemét. Észrevennie kell, hogy az alkalmazás terhelése csak egy kis kezdeti csomagot tölt le. Miután a gomb rákattint a bemeneti számok rendezéséhez, a rendezési kódot tartalmazó szkript / darabot el lehet fogadni és végrehajtani. Látod, hogy a számok még mindig rendeződnek, ahogy azt elvárnánk őket?

A JavaScript kód felosztása és a lusta-terhelés nagyon hasznos lehet az alkalmazás vagy webhely kezdeti csomagméretének csökkentéséhez. Ez közvetlenül a felhasználók számára gyorsabb oldaltöltési időt eredményezhet. Bár megnéztük a kódot egy vanília JavaScript alkalmazáshoz való felosztására, akkor is alkalmazhatja a könyvtárakkal vagy keretekkal felszerelt alkalmazásokra is.

Lusta-terhelés JavaScript könyvtárral vagy keretrendszerrel

Sok népszerű keretrendszer támogatja a kód felosztását és a lusta-betöltést dinamikus behozatal és webepack segítségével.

Itt van, hogyan lusta-betöltheti a "Leírás" komponenst a reagálással (a Reagáljon.lazy () és a felfüggesztés jellemzője), hogy "betöltést ..." -ot biztosítson, miközben az összetevő lusta-betöltődik (lásd itt néhány részletért):

 Import reagálás, {Suspense} a "reagál";
const description = reage.lazy (() = = & gt; import ('./ leírás));
Funkció alkalmazás () {
  Visszatérés (
    & lt; div & gt;
      & lt; h1 & gt; a filmem & lt; / h1 & gt;
      & lt; susfense-visszaesés = "betöltés ..." & gt;
        & Lt; Leírás / & gt;
      & lt; / suspense & gt;
    & lt; / div & gt;
  );
} 

A kódfelosztás segíthet csökkenteni a JavaScript hatását a felhasználói élményre. Határozottan fontolja meg, ha nagyobb JavaScript kötege van, és ha kétségei vannak, ne felejtsd el mérni, optimalizálni és figyelni.

Ezt a cikket eredetileg a 317. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon ki kérdezést 317 vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

• 9 a legjobb JavaScript keretrendszerek közül
• 15 Alapvető JavaScript eszköz, amelyet használni kell
• A legjobb JavaScript API-k közül 14