როგორ ხდება სურათებისა და კომპონენტების lazy-load და რატომ?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** გადადებს რაღაცის ჩამოტვირთვას, სანამ ის ნამდვილად არ დაჭირდება — ჩვეულებრივ, როცა ის ეკრანზე გამოსაჩენად ემზადება. ეს ამცირებს საწყის დატვირთვას, ასე რომ გვერდის ხილული ნაწილი უფრო სწრაფად იტვირთება. ## სურათების lazy-load ბრაუზერი ამას ბუნებრივად აკეთებს ერთი ატრიბუტით: ```html

``` ყოველთვის შეინახე `width`/`height`, რომ ბრაუზერმა ადგილი დაიტოვოს (თავიდან იცილებს layout shift-ს). არასდროს გააკეთო შენი LCP სურათის lazy-load — ეს აჭიანურებს სწორედ იმას, რასაც ზომავენ. ## კომპონენტების (კოდის) lazy-load გაყავი მძიმე ან იშვიათად გამოყენებული UI (modal-ები, დიაგრამები) ცალკე chunk-ად, რომელიც საჭიროებისამებრ იტვირთება: ```js // Instead of a static import that ships in the main bundle: const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered }> ``` დინამიური `import()` ეუბნება bundler-ს, შექმნას ცალკე ფაილი, რომელიც მხოლოდ მაშინ იტვირთება, როცა `` პირველად იხატება. ## რატომ არის ეს მნიშვნელოვანი Lazy-loading არის ყველაზე მარტივი, ყველაზე მაღალეფექტიანი გამარჯვება მძიმე გვერდისთვის: ნაკლები ჩამოსატვირთი წინასწარ ნიშნავს უფრო სწრაფ LCP-ს და ნაკლებ JS-ს დასამუშავებლად. ინტერვიუერებს სურთ დაინახონ, რომ hero სურათს *არ* უკეთებ lazy-load-ს — კლასიკური შეცდომა, რომელიც ვნებს იმ მეტრიკას, რომლის დახმარებასაც ცდილობ.

სურათების lazy-load

კომპონენტების (კოდის) lazy-load

რატომ არის ეს მნიშვნელოვანი

დაკავშირებული კითხვები