Kif tagħmel lazy-load tal-immaġni u l-komponenti, u għaliex?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** jipposponi t-tniżżil ta' xi ħaġa sakemm fil-fatt tkun meħtieġa — ġeneralment meta tkun waslet biex tidħol fil-view bl-iskrolljar. Dan inaqqas il-payload inizjali biex il-parti viżibbli tal-paġna titgħabba aktar malajr. ## Lazy-loading tal-immaġni Il-browser jagħmlu b'mod nattiv b'attribut wieħed: ```html

``` Dejjem żomm `width`/`height` biex il-browser jirriżerva l-ispazju (jevita layout shift). Qatt tagħmel lazy-load tal-immaġni LCP tiegħek — iddewwem l-istess ħaġa li qed titkejjel. ## Lazy-loading tal-komponenti (kodiċi) Aqsam UI tqila jew użata rari (modals, charts) f'chunk separat mgħobbi fuq talba: ```js // Instead of a static import that ships in the main bundle: const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered }> ``` L-`import()` dinamiku jgħid lill-bundler biex joħloq file separat li jitniżżel biss meta `` jiġi renderjat għall-ewwel darba. ## Għaliex huwa importanti Lazy-loading huwa r-rebħa l-aktar sempliċi u b'ħafna effett għal paġna tqila: inqas x'tniżżel mill-bidu jfisser LCP aktar mgħaġġel u inqas JS x'tipparsja. L-intervistaturi jridu jaraw li *ma* tagħmilx lazy-load tal-hero image — żball klassiku li jagħmel ħsara lill-metrika li qed tipprova tgħin.

Lazy-loading tal-immaġni

Lazy-loading tal-komponenti (kodiċi)

Għaliex huwa importanti

Mistoqsijiet relatati