Kuinka käyttää Webpack-koodin jakamista Vue.js: n kanssa

kuva: pabloheimplatz

Olen työskennellyt Vue.js: n kanssa viimeiset 8 kuukautta ja ryhmäni kanssa ja olen käyttänyt erilaisia ​​suorituskyvyn optimointitekniikoita käyttökokemuksen parantamiseksi. On aika jakaa!

Huomaa: Voit lukea artikkelin tekemättä opetusohjelmaa. Voit nähdä koodin täältä.

Käytämme yksinkertaista projektia, joka on luotu vue-cli, webpack-mallin kanssa, vain kahdella reitillä (Hei ja Hyvästi):

git-klooni https://github.com/PierreCavalet/vuejs-code-splitting.git
npm asenna

Aiomme puhua rakennustyökaluista, joten tarvitset http-palvelimen staattisten tiedostojen tarjoamiseksi. Aion käyttää http-palvelinta, mutta voit käyttää toista, jos haluat.

npm asenna -g http-palvelin

Kun rakennat suurta sovellusta, Javascript-paketti voi tulla melko suuri. Tämä vaikuttaa suoraan käyttökokemukseen, koska latausaika kasvaa vastaavasti.

Ensinnäkin meidän on ymmärrettävä, kuinka sovellus rakennetaan tuotantoa varten.

Npm run build

Tämä komento tuottaa tiedostot, jotka palvellaan HTTP-palvelimen kautta. Tässä on rakenne:

.
├── hakemisto.HASH.html
├── staattinen /
│ └── css /
└── │ └── app.HASH.css
└── │ └── app.HASH.css.map
│ └── js /
│ │ └── app.HASH.js
│ │ └── app.HASH.js.map
│ │ └── manifest.HASH.js
│ │ └── manifest.HASH.js.map
│ │ └── myyjä.HASH.js
│ │ └── myyjä.HASH.js.map

App.HASH.js -paketti sisältää sovelluskoodin (ilman ulkoisia kirjastoja, jotka ovat myyjällä.HASH.js).

Käytämme http-palvelinta näiden tiedostojen palvelemiseen.

http-server dist /

Oletuksena http-palvelin toimii 8080-portissa. Sinun pitäisi voida nähdä täällä tuotannolle rakennettu sovelluksesi.

Käytän kromia, mutta voit tehdä seuraavat toimet melkein millä tahansa selaimella. Chromen dev-työkaluista näet verkkoliikenteen:

Index.html sisältää skripti- ja linkkitunnisteet, jotka käskevät selainta lataamaan yllä olevat js- ja css-tiedostot.

Koodijako antaa sinun luoda paloja, joita ei ole niputettu app.HASH.js. Sen sijaan nämä palat ladataan asynkronisesti, kun niitä vaaditaan. Tämä tekniikka on hyödyllinen, kun sovelluksestasi tulee liian suuri, jotta sitä voidaan näyttää yhtenä tiedostona, tai kun sinulla on paljon sisältöä, jota käyttäjät todennäköisesti eivät käytä.

Palataan takaisin esimerkkiimme. Oletetaan, että Goodbye-komponentti on huuugeu ja meidän on jaettava se pois.

Webpack tarjoaa koodinjako-ominaisuuden, jonka avulla voit luoda palasia, jotka voidaan sitten ladata pyydettäessä. Käytämme:

  • dynaaminen Webpack-tuontiominaisuus, joka jakaa koodin omaan kappaleeseensa
  • Async Components -ominaisuus lataamaan komponentin asynkronisesti

Vaihda src / router / index.js tällä uudella sisällöllä.

Ja siinä se on. Tavallisen tuonnin sijasta määrittelemme hyvästi nuolitoiminnolla, joka palauttaa lupauksen (tuonti palauttaa lupauksen). Katsotaanpa nyt eroa tuotantoon rakennetun sovelluksen kanssa.

Poista ensin vanha rakenne:

rm-rf dist / *

Rakenna sitten sovellus uudelleen:

Npm run build

Huomaa, että ulostulossa on uusi Javascript-tiedosto:

.
├── hakemisto.HASH.html
├── staattinen /
│ └── css
└── │ └── app.HASH.css
└── │ └── app.HASH.css.map
│ └── js
│ │ └── app.HASH.js
│ │ └── app.HASH.js.map
│ │ └── 0.HASH.js
│ │ └── 0.HASH.js.map
│ │ └── manifest.HASH.js
│ │ └── manifest.HASH.js.map
│ │ └── myyjä.HASH.js
│ │ └── myyjä.HASH.js.map

0.HASH.js on kimpale, joka sisältää hyvästit komponentin.

Lataa sovellus ja vertaa verkkoa.

Kun lataat sovelluksen, näet tämän verkon:

Ensin voidaan huomata, että sovellus on hieman kevyempi (-0,5 kb), koska se ei sisällä Goodbye-komponenttia. Jos napsautamme näkemiin linkkiä, tässä on verkko:

Palat ladataan asynkronisesti. Näin koodinjako toimii.

Nyt sovelluksesi kasvaessa sinulla on yhä enemmän async-komponentteja. Kuvittele, että sinulla on prosessi, joka käyttää 2 reittiä, reittiä / foo ja / bar reittiä. Voit ryhmitellä 2 palat samaan kappaleeseen nimeltään palasella. Kokeillaan tätä.

Ensin meidän on asennettava projektisi enemmän async-komponenteilla:

Git Stash
git kassalla useita asynk-komponentteja

Huomaa: Jos et todellakaan tee opetusohjelmaa, voit tarkistaa lähteen githubista.

Poista vanha rakennus ja rakenna sovellus uudelleen:

rm-rf dist / *
Npm run build

Kuten huomaat, siellä on 3 palat (0, 1, 2).

Nyt käytämme erityistä webpack-parametria: webpackChunkName.

Vaihda src / router / index.js tällä uudella sisällöllä.

Nyt jos rakennat sovelluksesi uudelleen, voit nähdä, että paloja on vain kaksi:

  • Yksi Goodbye-komponentilla
  • Yksi Foo- ja Bar-komponenteilla

Jos haluat lisätietoja aiheesta, voit tarkistaa viralliset ohjeet.