Koodin jakaminen (Code Splitting)
Koodin jakaminen on tekniikka, joka pilkkoo suuren JavaScript-paketin pienemmiksi paloiksi, jotka ladataan tarvittaessa, jotta käyttäjät lataavat vain sen koodin, jota tarvitaan juuri katsottavalla sivulla.
Modernit verkkosovellukset voivat sisältää miljoonia rivejä JavaScript-koodia. Ilman koodin jakamista koko tämä koodi pakataan yhteen tiedostoon, joka jokaisen käyttäjän on ladattava ennen kuin sovellus muuttuu interaktiiviseksi, vaikka käyttäjä vierailisi vain yhdellä sivulla. Koodin jakaminen (code splitting) jakaa sovelluspaketin pienempiin osiin reittien, komponenttien tai ominaisuuksien perusteella.
Kun käyttäjä siirtyy asetus-sivulle, kyseinen koodi latautuu tarvittaessa. Kirjastoja, joita käytetään vain tietyissä ominaisuuksissa, jaetaan omiksi osioikseen. Koodin jakamiseen on useita lähestymistapoja.
Käytännössä
- SaaS-alustan hallintapaneeli pienensi alkuperäisen JavaScript-paketin koosta 3,2 Mt:iin 450 kt:iin reittipohjaisen koodin jakamisen avulla, jolloin kirjautumissivu latautui alle kahdessa sekunnissa aiemman kahdeksan sijaan
- Verkkokauppa laturoi tuotearviointikomponentin (joka sisälsi raskaan monimuotoisen tekstieditorin) tarpeen mukaan, säästäen 200 kt alkuperäisestä tuotesivun latauksesta
- Next.js-sovellus jakaa koodin automaattisesti reittien mukaan, joten sen 50-sivuisen sovelluksen etusivu lataa vain 120 kt JavaScriptiä kokonaismäärän 4 Mt sijaan
- Web-sovellus erotti kaaviokirjaston omaksi osioksi, joten käyttäjät, jotka eivät koskaan vieraile analytiikkapaneelissa, eivät lataa 500 kt:n kaaviokirjastoa
Et ole varma, miten tämä koskee sinua?
Kokenut insinööri käy läpi kohteen, hakukoneesi esiintymisen ja yhteydenottojen saannin, ja kirjoittaa kolme asiaa, jotka kannattaa korjata ensin. Pidät dokumentin joka tapauksessa.