Kuidas kasutada Webpacki koodi jagamist saidiga Vue.js

foto autor: pabloheimplatz

Olen töötanud Vue.js-ga viimased 8 kuud ja oma meeskonnaga ning olen kasutajakogemuse parandamiseks kasutanud erinevaid jõudluse optimeerimise tehnikaid. On aeg jagada!

Märkus. Saate artiklit lugeda ilma juhendit tegemata. Koodi näete siit.

Kasutame veebipaketi malliga lihtsat projekti, mis on loodud vue-cli abil ja millel on ainult kaks marsruuti (Tere ja Hüvasti):

git kloon https://github.com/PierreCavalet/vuejs-code-splitting.git
npm installimine

Me räägime ehitustööriistadest, nii et staatiliste failide teenindamiseks vajate http-serverit. Ma kasutan http-serverit, kuid soovi korral võite kasutada ka mõnda muud.

npm install -g http-server

Suure rakenduse ehitamisel võib Javascripti kimp muutuda üsna suureks. See mõjutab otseselt kasutajakogemust, kuna laadimisaeg pikeneb vastavalt.

Esiteks peame mõistma, kuidas rakendus tootmiseks ehitatakse.

npm käivitage

See käsk loob faile, mida pakutakse HTTP-serveri kaudu. Siin on struktuur:

.
├── register.HASH.html
├── staatiline /
│ └── css /
└── │ └── rakendus.HASH.css
└── │ └── rakendus.HASH.css.map
│ └── js /
│ │ └── app.HASH.js
│ │ └── rakendus.HASH.js.map
│ │ └── manifest.HASH.js
│ │ └── manifest.HASH.js.map
│ │ └── müüja.HASH.js
│ │ └── tarnija.HASH.js.map

Rakendus app.HASH.js sisaldab rakenduse koodi (ilma väliste teekideta, mis asuvad tarnija.HASH.js).

Nende failide teenindamiseks kasutame http-serverit.

http-server dist /

Vaikimisi töötab http-server pordil 8080. Siin peaksite nägema oma tootmiseks loodud rakendust.

Ma kasutan kroomi, kuid peaaegu kõigi brauseritega saate teha järgmist. Chrome'i tööriistade abil näete võrguliiklust:

Indeks.html sisaldab skripti- ja lingimärgiseid, mis kästavad brauseril alla laadida ülaltoodud js- ja css-failid.

Koodide tükeldamine võimaldab teil luua tükke, mida pole rakenduses.HASH.js komplekteeritud. Selle asemel laaditakse need tükid vajaduse korral asünkroonselt. See tehnika on kasulik, kui teie rakendus muutub liiga suureks, et seda ühe failina esitada, või kui teil on palju sisu, mida kasutajad tõenäoliselt ei kasuta.

Tuleme tagasi meie näite juurde. Teeskleme, et meie Goodbye komponent on huuuuuge ja me peame selle tükeldama.

Webpack pakub koodide jagamise funktsiooni, mis võimaldab teil luua tükke, mida saab seejärel nõudmise korral laadida. Me kasutame:

  • dünaamilise impordi Webpacki funktsioon, et kood jagada oma tükkideks
  • funktsioon Async Components komponendi laadimiseks asünkroonselt

Muutke src / ruuter / index.js selle uue sisuga.

Ja see ongi kõik. Tavalise impordi asemel määratleme hüvasti noolefunktsiooniga, mis annab lubaduse (import tagastab lubaduse). Vaatame nüüd erinevust tootmiseks loodud rakendusega.

Esiteks eemaldage vana ehitis:

rm-rf dist / *

Seejärel taastage rakendus:

npm käivitage

Pange tähele, et väljundis on uus Javascripti fail:

.
├── register.HASH.html
├── staatiline /
│ └── css
└── │ └── rakendus.HASH.css
└── │ └── rakendus.HASH.css.map
│ └── js
│ │ └── app.HASH.js
│ │ └── rakendus.HASH.js.map
│ │ └── 0.HASH.js
│ │ └── 0.HASH.js.map
│ │ └── manifest.HASH.js
│ │ └── manifest.HASH.js.map
│ │ └── müüja.HASH.js
│ │ └── tarnija.HASH.js.map

0.HASH.js on tükk, mis sisaldab hüvastijätmise komponenti.

Laadige rakendus sisse ja võrrelge võrku.

Rakenduse laadimisel näete seda võrku:

Esiteks võime märkida, et rakendus on pisut kergem (-0,5 kb), kuna see ei sisalda Goodbye komponenti. Kui me klõpsame hüvasti lingil, on siin võrk:

Paks laaditakse asünkroonselt. Nii toimib koodide jagamine.

Nüüd, kui teie rakendus kasvab, on teil üha rohkem asünkrokomponente. Kujutage ette, et teil on protsess, mis kasutab 2 marsruuti, marsruuti / foo ja / bar. Saate grupeerida kaks tükki samasse tükki, kasutades nimega tükk. Proovime seda.

Esmalt peame seadistama teie projekti rohkemate asünkrokomponentidega:

väheke jäme
git checkout mitme asünkriga komponendid

Märkus. Kui te tegelikult ei tee seda õpetust, saate kontrollida allikat githubis.

Eemaldage vana versioon ja ehitage rakendus uuesti üles:

rm-rf dist / *
npm käivitage

Nagu näete, on 3 tükki (0, 1, 2).

Nüüd kasutame veebipaketi jaoks spetsiaalset parameetrit: webpackChunkName.

Muutke src / ruuter / index.js selle uue sisuga.

Kui nüüd oma rakendust uuesti üles ehitate, näete, et neid on ainult kaks tükki:

  • Üks Goodbye komponendiga
  • Üks koos Foo ja Bar komponendiga

Kui soovite selle teema kohta lisateavet, saate vaadata ametlikku dokumentatsiooni.