Luând Vulcan de la 4,2 MB la 1,98 MB

Meteor 1.5 tocmai a ieșit, iar noua caracteristică mare, strălucitoare, este importurile dinamice.

dietă

Dar un instrument foarte interesant a fost livrat, de asemenea, alături de această caracteristică: Bundle Visualizer:

Acest lucru vă arată pe un grafic exact pachetele Meteor și NPM care ocupă cel mai mult spațiu din pachetul dvs.

Pentru a o utiliza, pur și simplu actualizați aplicația la Meteor 1.5, adăugați pachetul de vizualizare a pachetului și apoi rulați aplicația în modul de producție (meteor --production).

Vizualizatorul poate dezvălui câteva fapte surprinzătoare, la fel ca atunci când l-am folosit pe Vulcan!

Am renunțat să mă concentrez pe dimensiunea pachetului mult prea mult timp și s-a arătat! Pachetul a intrat la 4,2 MB masiv, fără gzip:

Dacă te uiți la bara portocalie (a doua din centru), poți vedea că există un segment lung și continuu și apoi se descompune în bucăți mai mici. Acel segment continuu corespunde pachetelor NPM ale aplicației (cu alte cuvinte, temutul folder node_modules), care depășesc drastic codul Meteor actual (micile bucăți).

Iată o defalcare a celor mai mari vinovați:

  • intl: 935 kb
  • react-intl: 341kb
  • intl-relativeformat: 331kb
  • react-dom: 181kb
  • graphql: 171kb
  • react-bootstrap: 161kb
  • ghidon: 75,8 kb
  • core-js: 75.2kb
  • lodash: 72,8 kb
  • eliptică: 72,5 kb
  • client apollo: 64kb
  • crypto-js: 56kb
  • intl-messageformat: 55,1kb
  • moment: 49kb
  • schemă simplă: 39kb

După cum puteți vedea, cea mai mare bucată de departe a fost pachetele de internaționalizare, cu 1,6 MB în total! Cu alte cuvinte, 40% din dimensiunea pachetului a fost preluată de o caracteristică de care majoritatea oamenilor ar putea să nu aibă întotdeauna nevoie.

Acum nu am vrut să arunc cu totul internaționalizarea. Și, de asemenea, nu am vrut să forțez oamenii să-și refactorizeze tot codul pentru a scăpa de apelurile către API-urile react-intl.

Așa că am găsit o cale de mijloc bună: am creat un nou pachet simplificat vulcan: i18n care folosește exact aceleași API-uri ca și react-intl, dar include doar caracteristicile sale cele mai comune (și nici una dintre dependențele sale!).

Înlocuiți orice importare react-intl cu vulcan: importurile i18n și sunteți bine! Și dacă aveți nevoie de întreaga putere a react-intl, crearea propriei copii a vulcan: i18n care reexportează react-intl nu ar trebui să fie prea greu:

Evident, acest lucru nu se aplică în orice situație, dar crearea propriilor versiuni de pachete care includ doar caracteristicile de care aveți nevoie poate fi uneori o modalitate excelentă de a vă reduce aplicația.

Rezultat: 1,6 MB salvate!

Coborând pe listă (sau mai bine zis, în jurul cercului) o altă sursă mare de greutate moartă a fost react-bootstrap.

Pe cât de utilă este acea bibliotecă, foloseam doar o mică parte din componentele pe care le oferă. M-am gândit să scap de el cu totul, dar asta ar însemna să trebuiască să-mi codific propriile drop-down-uri, modale etc. Nu e amuzant!

În schimb, am găsit o soluție mult mai simplă. Se pare că există o mare diferență între:

Primul va importa întregul conținutul pachetului, în timp ce al doilea va fi doar importă componenta Foo și dependențele sale!

Am convertit toate importurile mele în a doua sintaxă, iar rezultatele vorbesc de la sine:

Un lucru pe care nu-l spune vizualizatorul este de unde provine o dependență. De exemplu, am descoperit că ghidonele erau cumva pachetate pe client, dar nu știam ce pachet NPM îl cerea.

Se pare că există o comandă simplă care vă permite să știți exact asta:

Rezultatul mi-a spus că ghidonul era o dependență de schema simplă și, din moment ce sunt destul de sigur că nu este cu adevărat necesar, aștept cu nerăbdare să scot încă câțiva KB din dimensiunea pachetului meu odată ce a fost eliminat:

După toate aceste optimizări și multe altele, am reușit să reduc dimensiunea pachetului la 1,98 MB, cu alte cuvinte mai puțin de 50% din ceea ce am început!

Partea amuzantă: nici măcar nu a trebuit să folosesc importuri dinamice pentru a obține aceste rezultate. Aștept cu nerăbdare să le implementez și să obțin câștiguri (sau pierderi, chiar mai bune, cred?), Dar o voi lăsa pentru un alt post.