Miten lazy-lataat kuvia ja komponentteja, ja miksi?

Question

IT Interview Practice · Accepted Answer

**Lazy-lataus** (laiska lataus) lykkää jonkin lataamista, kunnes sitä todella tarvitaan — yleensä kun se on juuri vierittymässä näkyviin. Tämä pienentää alkukuormaa, jotta sivun näkyvä osa latautuu nopeammin. ## Kuvien lazy-lataus Selain tekee sen natiivisti yhdellä attribuutilla: ```html

``` Pidä aina `width`/`height` niin, että selain varaa tilan (välttää layout-siirtymän). Älä koskaan lazy-lataa LCP-kuvaasi — se viivyttää juuri sitä asiaa, jota mitataan. ## Komponenttien lazy-lataus (koodi) Pilko raskas tai harvoin käytetty käyttöliittymä (modaalit, kaaviot) erilliseen chunkkiin, joka ladataan tarvittaessa: ```js // Sen sijaan että staattinen import, joka toimitetaan pääbundlessa: const Chart = React.lazy(() => import("./Chart")); // erillinen chunk, haetaan kun renderöidään }> ``` Dynaaminen `import()` kertoo bundlerille luoda erillisen tiedoston, joka latautuu vain kun `` renderöityy ensimmäisen kerran. ## Miksi se on tärkeää Lazy-lataus on yksinkertaisin, suurimman vipuvoiman voitto raskaalle sivulle: vähemmän ladattavaa etukäteen tarkoittaa nopeampaa LCP:tä ja vähemmän JS:ää jäsennettäväksi. Haastattelijat haluavat nähdä, että *et* lazy-lataa hero-kuvaa — klassinen virhe, joka vahingoittaa juuri sitä mittaria, jota yrität auttaa.

Kuvien lazy-lataus

Komponenttien lazy-lataus (koodi)

Miksi se on tärkeää

Aiheeseen liittyvät kysymykset