Reducerea dimensiunii pachetului - Blog LogRocket

18 iunie 2020 9 min citit 2534

reducerea

Chiar dacă avem astăzi computere și dispozitive mobile mai rapide, noi ca dezvoltatori ar trebui să ne gândim la publicul pentru care construim produsul în ansamblu. Nu toată lumea are acces la același tip de dispozitiv rapid sau se află pe cea mai rapidă rețea de internet. Deci, trebuie să aruncăm o privire mai largă asupra problemelor de performanță. Performanța poate fi urmărită în multe moduri diferite, dar pentru acest articol, ne vom concentra pe performanța frontend. Privim mai atent acest aspect și oferim sugestii pentru posibile îmbunătățiri în acest domeniu.

Performanță frontend

Optimizarea performanței frontendului este esențială, deoarece reprezintă aproximativ 80-90% din timpul de răspuns al utilizatorilor. Deci, atunci când un utilizator așteaptă încărcarea unei pagini, aproximativ 80-90% din timp se datorează codului și activelor legate de frontend. Ilustrațiile de mai jos arată raportul dintre activele frontend/backend care trebuie încărcate pentru LinkedIn.

Sursa: http://www.stevesouders.com/

O mare parte din timpul de încărcare al frontend-ului este cheltuit pentru executarea fișierelor JavaScript, precum și pentru redarea paginii. Dar o parte critică pentru îmbunătățirea performanței frontendului este reducerea dimensiunii pachetului JavaScript care ar trebui descărcată prin rețea. Cu cât este mai mică dimensiunea pachetului JavaScript, cu atât pagina poate fi mai rapidă disponibilă pentru utilizatori.

Dacă ne uităm la datele istorice, putem vedea că fișierele JavaScript au fost în medie de 2 KB în 2010. Dar odată cu evoluția JavaScript, introducerea de noi biblioteci JavaScript, precum Angular sau React, și cu conceptul de aplicații cu o singură pagină dimensiunea medie a activelor JavaScript a crescut la 357 KB în 2016. Trebuie să folosim aceste noi tehnologii pentru soluții mai bune. Dar trebuie, de asemenea, să luăm în considerare modalitățile posibile de a le îmbunătăți performanța, făcând lucruri precum reducerea dimensiunii globale a pachetului JavaScript. Dar, înainte de a ne arunca cu privire la acest subiect, trebuie să ne familiarizăm cu pachetele JavaScript. Ce sunt exact?

Pachete JavaScript

Aplicația dvs. frontend are nevoie de o grămadă de fișiere JavaScript pentru a rula. Aceste fișiere pot fi în formatul dependenței interne, cum ar fi fișierele JavaScript pe care le-ați scris dumneavoastră. Ele pot fi, de asemenea, dependențe externe și biblioteci pe care le utilizați pentru a vă crea aplicația, cum ar fi React, lodash sau jQuery. Deci, pentru ca pagina dvs. să se încarce prima dată, aceste fișiere JavaScript trebuie să fie accesibile aplicației. Deci, cum le expunem?

În trecut, modul de expunere a fișierelor JavaScript era mult mai simplu. Majoritatea paginilor web nu au nevoie de multe active JavaScript. Deoarece nu aveam acces la un mod standard de solicitare a dependențelor, a trebuit să ne bazăm pe utilizarea dependențelor globale. Imaginați-vă că aveam nevoie atât de jQuery, cât și de main.js și other.js care dețin toate aplicațiile noastre logice JavaScript. Modul în care am putut expune aceste dependențe arăta cam așa:

Aceasta a fost o soluție ușoară la această problemă, dar a scăpat rapid de sub control atunci când a scalat aplicația. De exemplu, dacă main.js se schimbă într-un mod care depinde de codul din other.js, trebuie să reordonăm etichetele scriptului nostru astfel:

După cum putem vedea, gestionarea unei astfel de structuri de cod la scară ar deveni rapid o mizerie. Dar după un timp, au existat soluții mai bune pentru gestionarea acestui lucru în aplicații. De exemplu, dacă utilizați NodeJS, v-ați putea baza pe sistemul de module propriu al NodeJS (bazat pe specificațiile commonJS). Acest lucru vă va permite să utilizați funcția de solicitare pentru a solicita dependențe. Deci, într-un mediu Node, fragmentul de cod de mai sus ar arăta cam așa:

În prezent, nu aveți doar câteva fișiere JavaScript pentru a vă rula aplicația. Dependențele JavaScript pentru aplicația dvs. pot include câteva sute sau mii de fișiere și este clar să le enumerați, așa cum fragmentul de mai sus nu este posibil. Există mai multe motive pentru aceasta:

  • Separarea activelor JavaScript în fișiere separate necesită o mulțime de solicitări HTTP atunci când diferite părți ale aplicației necesită dependențe diferite. Nu va fi performant și durează mult timp
  • În plus, NodeJS require este sincron, dar vrem să fie asincron și să nu blocheze firul principal dacă activul nu este deja descărcat

Deci, cea mai bună abordare pare să fie plasarea întregului cod JavaScript într-un singur fișier JavaScript și gestionarea tuturor dependențelor din acesta. Ei bine, aceasta este sarcina de bază a unui pachet JavaScript. Deși diferiți grupatori pot avea strategii diferite pentru a face acest lucru. Să explorăm acest lucru un pic mai departe și să vedem cum realizează acest lucru un pachet. Apoi vom vedea dacă există îmbunătățiri suplimentare pe care le putem face pentru a obține o dimensiune mai mică a pachetului și, prin urmare, mai multă performanță. În scopul acestui articol, vom folosi Webpack ca pachet, care este una dintre cele mai faimoase opțiuni de acolo.

Am făcut o demonstrație personalizată pentru .
Nu chiar. Faceți clic aici pentru a o verifica .

Construirea unui pachet de probe cu Webpack

Să începem prin configurarea unui proiect Webpack simplu. Vom folosi pachetele de bază pentru lansarea unui proiect simplu de aplicație web. React, ReactDOM ca cadru UI, SWC ca alternativă mai rapidă la Babel pentru transpilare, precum și o serie de instrumente și încărcătoare Webpack. Așa va arăta package.json:

De asemenea, vom avea nevoie de un webpack.config.js, care este punctul de intrare de configurare pentru comenzile noastre Webpack. Există mai multe opțiuni în acest fișier, dar să clarificăm câteva dintre cele importante:

  • mod - Aceasta este o opțiune pentru Webpack pentru a ști dacă ar trebui să facă orice optimizare, pe baza opțiunii către care este transmisă. Vom discuta în continuare mai târziu
  • ieșire - Această opțiune spune Webpack unde ar trebui să încarce sau să pună pachetele asamblate la nivel rădăcină. Este necesar atât calea, cât și numele fișierului
  • HTMLWebpackPlugin - Această opțiune ne ajută să facilităm difuzarea fișierelor noastre HTML cu pachetul Webpack
  • încărcătoare - Aceste suplimente pentru încărcător vă ajută să transformați majoritatea caracteristicilor moderne ale limbajului de codare în cod de înțeles pentru toate browserele