面试题：Next.js 跨平台静态文件兼容性 - 优化策略

Question

在处理 Next.js 跨平台静态文件兼容性时，不同平台可能对文件大小、格式有不同要求。假设你正在开发一个同时面向 Web 和移动端的应用，为了提升加载性能，针对静态图片资源，你会采取哪些优化策略？如何在 Next.js 项目中实现这些策略，包括使用哪些插件或工具以及具体的代码实现步骤。

Answer 1

优化策略

1. 图片格式选择：
   • Web 端：对于支持现代浏览器的场景，优先使用 AVIF 格式，因为它在保持高质量的同时，文件大小比 JPEG 和 PNG 更小。对于需要兼容旧浏览器的情况，备用 JPEG 或 PNG 格式。
   • 移动端：同样优先考虑 AVIF，若设备不支持，则选用 WebP，WebP 在移动端也有较好的压缩比，且很多移动设备已支持。
2. 图片尺寸优化：
   • 根据不同的屏幕分辨率和设备像素比，提供合适尺寸的图片。避免加载过大尺寸的图片造成带宽浪费和加载缓慢。例如，对于移动端竖屏小尺寸屏幕，提供较小尺寸的图片；对于桌面端大屏幕，提供较大尺寸图片。
3. 懒加载：只在图片进入视口时才加载，避免一次性加载过多图片，尤其是页面较长且包含大量图片的情况。这能显著提升页面的初始加载性能。
4. 压缩图片：在构建阶段对图片进行压缩，去除图片中不必要的元数据和冗余信息，进一步减小文件大小。

Next.js 项目实现

1. 使用 next/image：Next.js 内置的 next/image 组件提供了很多优化功能。
   • 安装：无需额外安装，Next.js 已自带。
   • 代码实现：

import Image from 'next/image'

function MyImage() {
  return (
    <Image
      src="/your-image.jpg"
      alt="description"
      width={300}
      height={200}
      layout="responsive"
    />
  )
}

- 上述代码中，`width` 和 `height` 属性指定了图片的尺寸，`layout="responsive"` 使图片能够根据父容器大小自适应调整，同时 `next/image` 会自动进行图片优化，包括格式转换和尺寸调整。

2. 图片格式转换： - 使用 image - optimizer 插件： - 安装：npm install image - optimizer - 配置：在项目根目录创建 image - optimizer.config.js 文件。

module.exports = {
  plugins: [
    {
      name: 'image - optimizer/sharp',
      options: {
        // 配置要转换的图片格式
        output: [
          {
            format: 'avif',
            quality: 80
          },
          {
            format: 'webp',
            quality: 80
          }
        ]
      }
    }
  ]
}

- **集成到 Next.js 构建流程**：在 `next.config.js` 中添加如下配置：

const withImageOptimizer = require('image - optimizer')

module.exports = withImageOptimizer({
  // 其他 Next.js 配置
})

3. 懒加载：next/image 组件默认开启懒加载，无需额外配置。当使用 layout="responsive" 或 layout="fill" 时，图片会在进入视口时加载。
4. 图片尺寸优化：
   • 根据设备像素比优化：next/image 组件支持通过 srcSet 属性提供不同分辨率的图片。例如：

import Image from 'next/image'

function MyImage() {
  return (
    <Image
      src="/your - image.jpg"
      alt="description"
      width={300}
      height={200}
      layout="responsive"
      srcSet="/small - image.jpg 1x, /medium - image.jpg 2x, /large - image.jpg 3x"
    />
  )
}

- 上述代码中，`srcSet` 根据设备像素比提供不同尺寸的图片，浏览器会根据设备情况选择合适的图片加载。