Verkkosuorituskyvyn optimointi ja Lighthouse · Oppitunti

Koodin jakaminen ja laiska lataus

Jaa suuret JavaScript-paketit dynaamisten importien ja reittikohtaisen jakamisen avulla tarvittaessa ladattaviin osiin, jotta käyttäjät lataavat vain tarvitsemansa koodin.

Oppitunti 4/413 vaihetta

Koodin jakaminen ja laiska lataus on ilmainen Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Verkkosuorituskyvyn optimointi ja Lighthouse-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Verkkosuorituskyvyn optimointi ja Lighthouse-kurssilla on yhteensä 4 oppituntia.

Monoliittisen bundlen ongelma

Kaiken JavaScriptin toimittaminen yhdessä bundlessa pakottaa käyttäjät lataamaan koodia sivuille, joilla he eivät ehkä koskaan käy. Code splitting jakaa bundlen pienemmiksi chunkeiksi, jotka ladataan vain tarvittaessa.

Dynaaminen import()

Dynaaminen import()-lauseke palauttaa promisen ja ohjaa bundlereita luomaan erillisen chunkin. Moduuli ladataan ajonaikaisesti tarvittaessa.

button.addEventListener('click', async () => {
  const { renderChart } = await import('./chart.js');
  renderChart();
});

Reittiperusteinen jakaminen

Vaikuttavin jakotapa on reittikohtainen: jokaisesta sivusta tulee oma chunkinsa, joten ensimmäinen lataus sisältää vain aloitusreitin.

const Dashboard = React.lazy(() => import('./pages/Dashboard'));

Suspense-varasisällöt

Kun lazy chunk latautuu, näyttäkää varasisältö, jotta käyttöliittymä säilyy responsiivisena. Reactissa tähän käytetään Suspense-komponenttia; muissa kehyksissä on vastaavia ratkaisuja.

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

Komponenttitason jakaminen

Myös raskaat widgetit, kuten rich text -editorit, kartat ja kaaviot, voidaan jakaa osiin. Ne ladataan vasta, kun käyttäjä avaa kyseisen toiminnon, ei ensimmäisen piirtokerran yhteydessä.

Toimittajakoodin jakaminen

Kolmannen osapuolen kirjastojen erottaminen vendor chunkiksi mahdollistaa niiden välimuistituksen itsenäisesti. Sovelluskoodi muuttuu usein, toimittajien koodi harvoin, joten käyttäjien tarvitsee ladata vähemmän uudelleen.

Chunkien ennakkolataus

Lazy loading voi lisätä viivettä käyttäjän siirtyessä sivulle. Ladatkaa chunk etukäteen joutoaikana, esimerkiksi linkin päällä leijuttaessa, jotta se on valmis ennen napsautusta.

link.addEventListener('mouseenter', () => import('./pages/Settings'));

Liiallisen jakamisen välttäminen

Liian monet pienet chunkit aiheuttavat pyyntöjen kustannuksia ja waterfall-ilmiöitä. Tavoitelkaa merkityksellisiä rajoja, kuten reittejä ja suuria toimintoja, älkääkä jakako jokaista pientä funktiota erikseen.

Tree shakingin synergia

Code splitting toimii yhdessä tree shakingin kanssa: käyttäkää ES-moduulien import-lausekkeita ja tuokaa vain tarvitsemanne, jotta kuollut koodi ei päädy yhteenkään chunkin.

import { debounce } from 'lodash-es'; // only debounce is bundled

Tuloksen mittaaminen

Tutkikaa chunkien koot bundle analyzerilla ja etsikää DevToolsin Coverage-välilehdeltä käyttämätöntä koodia, joka toimitetaan ensimmäisen latauksen yhteydessä. Lighthouse ilmoittaa suuresta käyttämättömästä JavaScript-määrästä.

Strategian yhteenveto

Jakakaa ensin reittien mukaan.
Ladatkaa raskaat komponentit laiskasti.
Erottakaa vendor chunkit välimuistitusta varten.
Ladatkaa todennäköiset seuraavat chunkit etukäteen joutoaikana.

Pikatarkistus

Mikä JavaScript-ominaisuus ohjaa bundlereita luomaan erillisen tarvittaessa ladattavan chunkin?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte pienentämään alkuperäistä siirtomäärää code splittingillä: dynaamisella import()-lausekkeella, reitti- ja komponenttitason lazy loadingilla, vendor chunkien käytöllä, joutoajan ennakkolatauksella ja tree shakingillä. Jakakaa koodi merkityksellisten rajojen kohdalta ja mitatkaa tulokset bundle analyzerilla.

Aloita maksutta

Opi Verkkosuorituskyvyn optimointi ja Lighthouse tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Koodin jakaminen ja laiska lataus” ilmainen?

Kyllä – oppitunnin ”Koodin jakaminen ja laiska lataus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Verkkosuorituskyvyn optimointi ja Lighthouse-kurssin, päivitä CoddyKit PROhon. Verkkosuorituskyvyn optimointi ja Lighthouse-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Koodin jakaminen ja laiska lataus”?

Jaa suuret JavaScript-paketit dynaamisten importien ja reittikohtaisen jakamisen avulla tarvittaessa ladattaviin osiin, jotta käyttäjät lataavat vain tarvitsemansa koodin. Harjoittelet Verkkosuorituskyvyn optimointi ja Lighthouse-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Verkkosuorituskyvyn optimointi ja Lighthouse-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Verkkosuorituskyvyn optimointi ja Lighthouse-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Koodin jakaminen ja laiska lataus”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunnilla?

Kyllä. Jokainen Verkkosuorituskyvyn optimointi ja Lighthouse-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

JavaScript-latauksen pienentäminen
Tehokkaat skriptien latausstrategiat
Web Workers ja pääsäikeen ulkopuolinen suoritus
Koodin jakaminen ja laiska lataus

← Takaisin: Verkkosuorituskyvyn optimointi ja Lighthouse