Kaip lazy-load paveikslėlius ir komponentus, ir kodėl?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** atideda kažko atsisiuntimą, kol jo iš tikrųjų prireikia — dažniausiai kai jis netrukus įslinks į matymo lauką. Tai sumažina pradinį krovinį, todėl matoma puslapio dalis įsikelia greičiau. ## Paveikslėlių lazy-loading Naršyklė tai daro natyviai su vienu atributu: ```html

``` Visada išlaikykite `width`/`height`, kad naršyklė rezervuotų vietą (išvengia layout shift). Niekada nelazy-loadinkite savo LCP paveikslėlio — tai atideda būtent tą dalyką, kuris matuojamas. ## Komponentų lazy-loading (kodas) Sunkų arba retai naudojamą UI (modalus, diagramas) atskirkite į atskirą chunk, įkeliamą pagal poreikį: ```js // Instead of a static import that ships in the main bundle: const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered }> ``` Dinaminis `import()` nurodo bundleriui sukurti atskirą failą, kuris atsisiunčia tik tada, kai `` pirmą kartą atvaizduojamas. ## Kodėl tai svarbu Lazy-loading yra paprasčiausias, didžiausios sverties laimėjimas sunkiam puslapiui: mažiau atsisiųsti iš anksto reiškia greitesnį LCP ir mažiau JS analizuoti. Interviuotojai nori pamatyti, kad *ne*lazy-loadinate hero paveikslėlio — klasikinė klaida, kuri kenkia metrikai, kurią bandote pagerinti.

Paveikslėlių lazy-loading

Komponentų lazy-loading (kodas)

Kodėl tai svarbu

Susiję klausimai