面试题：Next.js 中实现图片懒加载优化性能的基本方法

Question

在 Next.js 项目里，简要阐述实现图片懒加载优化性能的基本步骤，并说明涉及到的核心组件或方法。

Answer 1

基本步骤

1. 安装依赖：Next.js 内置了对图片优化和懒加载的支持，无需额外安装图片处理库。
2. 使用 next/image 组件：在页面中使用 next/image 组件来代替原生的 <img> 标签。例如：

import Image from 'next/image'

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

export default MyComponent

3. 配置 next.config.js：在 next.config.js 文件中可以对图片优化进行配置，如设置图片加载的路径、质量等。例如：

module.exports = {
  images: {
    domains: ['your-domain.com'], // 如果图片来自外部域名，需指定域名
    quality: 75, // 设置图片质量
  },
}

核心组件或方法

• next/image 组件：这是 Next.js 提供的核心组件，用于优化图片加载。它自动处理图片的大小调整、格式转换以及懒加载。通过设置 width 和 height 属性，组件能够在图片加载前预留空间，避免页面布局的跳动。同时，它会根据设备的屏幕分辨率和视口大小，加载合适尺寸的图片，以提高性能。懒加载是默认开启的，图片只有在进入浏览器视口时才会加载。
• next.config.js 中的 images 配置：用于对图片优化的全局配置，如指定图片加载的域名、设置图片质量、控制图片的最大宽度等。这些配置可以进一步优化图片加载的性能和效果。