Làm sao lazy-load ảnh và component, và tại sao?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** hoãn việc tải một thứ cho tới khi thật sự cần — thường là khi nó sắp cuộn vào khung nhìn. Điều này thu nhỏ payload ban đầu để phần đang thấy của trang tải nhanh hơn. ## Lazy-load ảnh Trình duyệt làm sẵn chỉ với một thuộc tính: ```html

``` Luôn giữ `width`/`height` để trình duyệt chừa sẵn chỗ (tránh layout shift). Không bao giờ lazy-load ảnh LCP — làm vậy trì hoãn đúng thứ đang được đo. ## Lazy-load component (code) Tách UI nặng hoặc ít dùng (modal, chart) ra một chunk riêng tải theo nhu cầu: ```js // Thay vì static import bị gói vào bundle chính: const Chart = React.lazy(() => import("./Chart")); // chunk riêng, fetch khi render }> ``` Cú pháp `import()` động báo cho bundler tạo một file riêng chỉ tải khi `` render lần đầu. ## Tại sao điều này quan trọng Lazy-loading là cách đơn giản, hiệu quả nhất cho một trang nặng: tải ít ngay từ đầu nghĩa là LCP nhanh hơn và ít JS phải parse hơn. Người phỏng vấn muốn thấy bạn *không* lazy-load ảnh hero — một lỗi kinh điển làm hại đúng metric bạn đang cố cải thiện.

Lazy-load ảnh

Lazy-load component (code)

Tại sao điều này quan trọng

Câu hỏi liên quan