Tot ce trebuie să știți despre divizarea codului JavaScript

Site-urile moderne combină adesea toate JavaScript-ul lor într-un singur, mare Main.js. script. Acest lucru conține în mod regulat scripturile pentru toate paginile sau rutele dvs., chiar dacă utilizatorii au nevoie doar de o mică parte pentru pagina pe care o vizualizează.

Când JavaScript este servit în acest fel, performanța de încărcare a paginilor dvs. web poate suferi - mai ales cu Designul web receptiv pe dispozitivele mobile. Deci, să o rezolvăm prin implementarea divizării codului JavaScript.

• Cum se cod mai repede, mai ușor JavaScript

Ce problemă se rezolvă cu codul de divizare a codului?

Când un browser web vede a & lt; script & gt; Trebuie să-și petreacă timpul să descărcați și procesați JavaScript-ul pe care îl referințe. Acest lucru se poate simți rapid pe dispozitivele high-end, dar încărcarea, parsarea și executarea codului JavaScript neutilizat poate dura ceva timp pe dispozitive mobile medii, cu o rețea mai lentă și o CPU mai lentă. Dacă ați avut vreodată să vă conectați la cafenea sau la hotelul WiFi, știți că experiențele rețelei lente se pot întâmpla tuturor.

Fiecare secundă petrecută pe JavaScript pentru a termina boot-ul poate întârzia modul în care utilizatorii sunt capabili să interacționeze cu experiența dvs. Acest lucru este valabil în special dacă UX se bazează pe JS pentru componente critice sau chiar pentru atașarea manipulatorilor de evenimente pentru piese simple de UI.

Trebuie să mă deranjez cu divizarea codului?

Merită cu siguranță să vă întrebați dacă aveți nevoie de cod-împărțită (dacă ați folosit un simplu Builder de site-uri web Probabil că nu aveți). Dacă site-ul dvs. necesită JavaScript pentru conținut interactiv (pentru caracteristicile, cum ar fi sertarele de meniu și carusele) sau este o aplicație cu o singură pagină care se bazează pe cadrele JavaScript pentru a face UI, răspunsul este probabil "da". Dacă divizarea codului este utilă pentru site-ul dvs. este o întrebare, va trebui să vă răspundeți. Înțelegeți arhitectura dvs. și modul în care site-ul dvs. încarcă cel mai bine. Din fericire, există instrumente disponibile pentru a vă ajuta aici. Amintiți-vă că, dacă implementați modificări în sistemul dvs. de proiectare, salvați aceste modificări ale dvs. partajate Stocare in cloud astfel încât echipa dvs. poate vedea.

Obține ajutor

Pentru cei noi la divizarea codului JavaScript, Far - Panoul Audits din Instrumente de dezvoltatori Chrome - poate ajuta la strălucirea unei lumini dacă aceasta este o problemă pentru site-ul dvs. Auditul pe care doriți să îl căutați este reducerea timpului de execuție JavaScript (documentat Aici ). Acest audit evidențiază toate scripturile de pe pagina dvs. care pot întârzia un utilizator care interacționează cu acesta.

Partesed Populare Este un instrument online care poate, de asemenea, evidențiați performanța site-ului dvs. - și include date de laborator de la far și date din lumea reală a performanței site-ului dvs. din raportul de experiență de utilizator Chrome. Ta web hosting Serviciul poate avea alte opțiuni.

Codul de acoperire în instrumentele de dezvoltatoare cromate

Dacă se pare că aveți scripturi costisitoare, care ar putea fi mai bine împărțită, următorul instrument de a se uita este caracteristica de acoperire a codului în instrumentele de dezvoltatoare Chrome (DevTools & GT; Meniu de sus-dreapta și GT; mai multe instrumente & gt; acoperire). Acest lucru măsoară cantitatea de JavaScript (și CSS) neutilizată în pagina dvs. Pentru fiecare script rezumat, devtools va arăta "octeți neutilizați". Acesta este codul pe care îl puteți lua în considerare împărțirea și încărcarea lenă atunci când utilizatorul are nevoie de ea.

Diferitele tipuri de divizare a codului

Există câteva abordări diferite pe care le puteți lua atunci când vine vorba de codul de divizare a codului JavaScript. Cât de mult se aplică acest lucru site-ului dvs. tinde să varieze în funcție de faptul dacă doriți să împărțiți pagina / aplicația "logică" sau împărțiți biblioteci / cadre de la alți "furnizori".

Decuparea codului dinamic: Multe dintre noi "static" importă module JavaScript și dependențe, astfel încât acestea să fie grupate împreună într-un singur fișier la momentul construirii. "Dynamic" Departamentul de cod adaugă capacitatea de a defini punctele din JavaScript pe care doriți să le împărțiți și încărcați leneș după cum este necesar. JavaScript modern utilizează dinamica import() declarație pentru a realiza acest lucru. Vom acoperi mai mult acest lucru.

Codul furnizorului de divizare: Cadrele și bibliotecile pe care le baza pe (de exemplu reacționează, unghiulare, vauze sau lodash) sunt puțin probabil să se schimbe în scripturile pe care le trimiteți la utilizatori, adesea ca "logica" pentru site-ul dvs. Pentru a reduce impactul negativ al invaliderii cache-ului pentru utilizatorii care se întorc la site-ul dvs., vă puteți împărți "vânzătorii" într-un script separat.

Codul de intrare-punct de intrare: Intrările sunt punctele de pornire în site-ul dvs. sau aplicația pe care un instrument, cum ar fi Webpack-ul poate să se uite la construirea copacului de dependență. Împărțirea prin intrări este utilă pentru paginile în care nu este utilizată o rutare pe partea clientului sau vă bazați pe o combinație de server și de redare a client-lateral.

Pentru scopurile noastre în acest articol, ne vom concentra pe divizarea codului dinamic.

Obțineți mâini cu divizarea codului

Să optimizăm performanța JavaScript a unui Aplicație simplă care sortează trei numere Prin divizarea codului - aceasta este o aplicație a colegului meu Houssein Djirdeh. Fluxul de lucru pe care îl vom folosi pentru a face încărcătura JavaScript rapid este măsura, optimizarea și monitorizarea. Începe aici .

A masura performanta

Înainte de a încerca să adăugați orice optimizare, vom măsura mai întâi performanța JavaScript-ului nostru. Pe măsură ce aplicația Magic Sorter este găzduită pe glitch, vom folosi mediul său de codificare. Iată cum să mergeți:

• Faceți clic pe butonul Show Live.
• Deschideți devtools prin apăsarea opțiunii CMD + + I / Ctrl + Shift + I.
• Selectați panoul de rețea.
• Asigurați-vă că dezactivați cache-ul este verificat și reîncărcați aplicația.

Această aplicație simplă pare să utilizeze 71,2 kB de JavaScript doar pentru a sorta câteva numere. Asta cu siguranță nu pare corect. În sursa noastră SRC / index.js. , Biblioteca Lodash Utility este importate și folosim filtrează după - una dintre utilitățile sale de sortare - pentru a sorta numerele noastre. Lodash oferă mai multe funcții utile, dar aplicația utilizează doar o singură metodă de la acesta. Este o greșeală obișnuită de a instala și de a importa toată dependența de terți atunci când este de fapt, trebuie doar să utilizați o mică parte din ea.

Optimizați pachetul

Există câteva opțiuni disponibile pentru tăierea dimensiunii pachetului JavaScript:

1. Scrieți o metodă de sortare personalizată în loc să vă bazați pe o bibliotecă de la terți.
2. Utilizare Array.protype.sort () , care este construit în browser.
3. Importați numai filtrează după metodă de la Lodash în loc de întreaga bibliotecă.
4. Descărcați numai codul pentru sortarea când un utilizator are nevoie (atunci când faceți clic pe un buton).

Opțiunile 1 și 2 sunt adecvate pentru reducerea dimensiunii pachetului - acestea au sens probabil pentru o aplicație reală. Pentru scopuri didactice, vom încerca ceva diferit. Opțiunile 3 și 4 ajută la îmbunătățirea performanței aplicației.

Importați numai codul de care aveți nevoie

Vom modifica câteva fișiere pentru a importa numai single filtrează după Metodă de care avem nevoie de la Lodash. Să începem să ne înlocuim Lodash. dependență de pachet.json. :

"lodash": "^4.7.0",

cu asta:

"lodash.sortby": "^4.7.0",

În SRC / index.js, vom importa acest modul mai specific:

 JS
Import "./style.css";
Import _ din "Lodash";
import sortare de la "Lodash.sortby"; 

Apoi, vom actualiza modul în care valorile sunt sortate:

 JS
form.addeventlistener ("Trimiteți", E = & GT; {
  e.preventdefault ();
  valorile const = [Input1.valueasnumber, intrare2.valueasnumber, intrare3.valueasnumber];
  const sortedvalues ​​= _.Sortby (valori);
  const sortedvalues ​​= sortby (valori);
  REZULTATE.Innerhtml = `
    & lt; h2 & gt;
      $ {sortedvalues}
    & lt; / h2 & gt;
  `
}); 

Reîncărcați aplicația Magic Numere, deschideți din nou instrumentele de dezvoltator și uitați-vă din nou panoul de rețea. Pentru această aplicație specifică, dimensiunea pachetului nostru a fost redusă cu o scară de patru cu puțină muncă. Dar există încă mult spațiu pentru îmbunătățire.

Dispozitiv de divizare a codului JavaScript

Webpack este unul dintre cele mai populare pachete de module JavaScript utilizate astăzi de dezvoltatorii web. Este "Bundles" (combină) toate modulele JavaScript și alte active în fișierele statice browsere web pot citi.

Bundurul single din această aplicație poate fi împărțit în două scripturi separate:

• Unul este responsabil pentru codul de formare a traseului inițial.
• Altul conține codul nostru de sortare.

Utilizarea importurilor dinamice (cu import() Cuvânt cheie), un al doilea script poate fi leneș încărcat la cerere. În aplicația Numere Magic, codul care alcătuiesc scriptul poate fi încărcat după cum este necesar atunci când utilizatorul dă clic pe butonul. Începem prin eliminarea importului de nivel superior pentru metoda de sortare din SRC / index.js. :

 Import Sortare de la "Lodash.sortby"; 

Importați-l în cadrul ascultătorului evenimentului care intră când se face clic pe butonul:

form.addeventlistener ("Trimiteți", E = & GT; {
  e.preventdefault ();
  Import ("Lodash.sortby")
    . Atunci (modul = & gt; modulul.default)
    . Atunci (sortare ())
    .Catch (err = & gt; {Alert (eroare});
});

Această dinamică import() Funcția pe care o folosim face parte dintr-o propunere de standardstrack pentru includerea capacității de a importa dinamic un modul în standardul de limbă JavaScript. Webpack acceptă deja această sintaxă. Puteți citi mai multe despre modul în care importurile dinamice funcționează în acest articol .

import() declarația returnează o promisiune când rezolvă. Webpack consideră acest lucru ca un punct divizat pe care îl va izbucni într-un script separat (sau o bucată). Odată ce modulul este returnat, modulul.default. este folosit pentru a face referire la exportul implicit furnizat de Lodash. . Promisiunea este înlănțuită cu alta .atunci() Apelarea A. Sortare metodă pentru a sorta cele trei valori de intrare. La sfârșitul lanțului de promisiune, .captură() este chemat să se ocupe de locul în care promisiunea este respinsă ca urmare a unei erori.

Într-o aplicație reală de producție, trebuie să gestionați în mod corespunzător erori de import dinamice. Mesajele simple de alertă (similare cu ceea ce este folosit aici) sunt ceea ce sunt utilizate și nu pot oferi cea mai bună experiență de utilizator pentru a lăsa utilizatorii să știe că ceva a mers prost.

În cazul în care vedeți o eroare de latting precum "Eroare de analiză: Importul și exportul pot apărea numai la nivelul superior", știți că acest lucru se datorează sintaxei dinamice de import care nu este încă finalizată. Deși Webpack îl suportă, setările pentru EsNINT (un instrument de legare JavaScript) utilizat de Glitch nu au fost actualizate pentru a include încă această sintaxă, dar funcționează încă.

Ultimul lucru pe care trebuie să-l facem este să scrieți Sortare la sfârșitul fișierului nostru. Aceasta trebuie să fie o funcție care să returneze o funcție care să ia metoda importată de la lodash.sortby. . Funcția imbricată poate sorta cele trei valori de intrare și poate actualiza DOM:

 const sundinput = () = & gt; {
  retur (sortare) = & gt; {
    Const valori = [
      intrare1.valueasnumber,
      Input2.valueASNumber,
      Intrare3.valueasnumber.
    ];
    const sortedvalues ​​= sortby (valori);
    REZULTATE.Innerhtml = `
      & lt; h2 & gt;
        $ {sortedvalues}
      & lt; / h2 & gt;
    `
  };
} 

Monitorizați numerele

Acum, să reîncărcați aplicația o dată și să țineți un ochi apropiat pe panoul de rețea. Trebuie să observați cum numai un mic pachet inițial este descărcat când se încarcă aplicația. După ce butonul este făcut clic pentru a sorta numerele de intrare, scriptul / bucata care conține codul de sortare este preluat și executat. Vedeți cum numerele încă vor fi sortate așa cum ne-ar aștepta ca acestea?

Dispozitivul de divizare a codului JavaScript și lenjeria lenjerie poate fi foarte utilă pentru tăierea dimensiunii inițiale a pachetului aplicației sau a site-ului. Acest lucru poate duce direct la timpuri de încărcare mai rapidă pentru utilizatori. Deși ne-am uitat la adăugarea de divizare a codului într-o aplicație JavaScript Vanilla, îl puteți aplica, de asemenea, la aplicațiile construite cu biblioteci sau cadre.

Leneș-încărcare cu o bibliotecă sau un cadru JavaScript

O mulțime de cadre populare suportă adăugarea de divizare a codului și încărcarea lenă utilizând importuri dinamice și webpack web.

Iată cum ați putea încărca o componentă a filmului "Descriere" utilizând reacția (cu Reaction.lazy () și caracteristica lor de suspensie) pentru a oferi o "încărcare ..." căderea în timp ce componenta este leneșată în (vezi Aici Pentru mai multe detalii):

 Importul reacționează, {suspans} de la "reaction";
Constan Descriere = reaction.lazy (() = & gt; import ('./ descriere'));
Funcție aplicație () {
  întoarcere (
    & Lt; div & gt;
      & lt; h1 & gt; filmul meu & lt; / h1 & gt;
      & Lt; Suspens Fallback = "Încărcare ..." & GT;
        & Descriere / & gt;
      & lt; / suspans & gt;
    & lt; / div & gt;
  );
} 

Codul de divizare poate ajuta la reducerea impactului JavaScript asupra experienței dvs. de utilizator. În mod sigur o consideră că aveți pachete mai mari JavaScript și când aveți îndoieli, nu uitați să măsurați, să optimizați și să monitorizați.

Acest articol a fost publicat inițial în numărul 317 din net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpărați problema 317 aici sau Abonați-vă aici .

Articole similare:

• 9 dintre cele mai bune cadre JavaScript
• 15 Instrumente de JavaScript esențial pe care ar trebui să le utilizați
• 14 dintre cele mai bune api JavaScript