面试题：Next.js 中如何实现基本的懒加载组件以提升页面加载速度

Question

在 Next.js 项目里，描述一下实现懒加载单个组件（比如图片组件）的具体步骤和相关代码示例。并且说明懒加载该组件对页面加载速度提升的原理是什么。

Answer 1

实现懒加载单个组件（以图片组件为例）的具体步骤及代码示例

1. 安装依赖 Next.js 内置了对懒加载的支持，无需额外安装第三方库。
2. 使用 next/image 组件 在 Next.js 中，next/image 组件默认就实现了图片的懒加载。示例代码如下：

import Image from 'next/image';

const MyComponent = () => {
  return (
    <div>
      <Image
        src="/your-image-url.jpg"
        alt="Description of the image"
        width={500}
        height={300}
      />
    </div>
  );
};

export default MyComponent;

在上述代码中，src 是图片的路径，alt 是图片的替代文本，width 和 height 用于指定图片的尺寸。

懒加载该组件对页面加载速度提升的原理

1. 减少初始渲染负载
   • 懒加载使得图片在页面初始渲染时不被加载，只有当图片进入浏览器的视口（viewport）时才会加载。这样在页面首次渲染时，需要加载的资源数量减少，从而加快了页面的初始渲染速度。例如，一个页面有多个图片，若都不进行懒加载，浏览器需要同时请求并加载这些图片资源，而懒加载则将图片的加载推迟到必要的时候。
2. 按需加载
   • 懒加载遵循按需加载的原则。当用户浏览页面时，只有当图片即将进入可视区域，浏览器才会发起对该图片的加载请求。这避免了提前加载用户可能永远不会看到的图片，节省了网络带宽和资源，进一步提升了页面加载速度和用户体验。