面试题：Next.js 图片优化与自动格式转换的性能调优及缓存策略

1. Next.js 图片优化与自动格式转换基础

Next.js 内置了图片优化组件 <Image>，它能自动根据设备分辨率和支持的图片格式（如 WebP、AVIF）进行转换，以提供最佳的图片体验。

2. 性能调优 - 缓存策略配置

浏览器缓存：
- 设置合适的 Cache - Control 头。对于不经常变化的图片，可以设置较长的缓存时间，例如 Cache - Control: max - age = 31536000（一年）。在 Next.js 应用中，如果使用 Vercel 部署，Vercel 会自动为优化后的图片设置合理的缓存头。对于自建服务器，可以通过在服务器配置（如 Node.js 应用使用 Express 框架）中设置：

const express = require('express');
const app = express();
app.get('/_next/static/images/*.{jpg,png,gif,webp,avif}', (req, res) => {
    res.set('Cache - Control','max - age = 31536000, public');
    // 处理图片请求的其他逻辑
});

- 利用 `ETag` 头。`ETag` 是资源的唯一标识符，服务器可以根据图片内容生成 `ETag`，浏览器在后续请求中带上 `ETag`，服务器对比 `ETag` 判断图片是否有更新。如果没有更新，返回 `304 Not Modified`。在 Express 中可以这样实现：

const crypto = require('crypto');
app.get('/_next/static/images/*.{jpg,png,gif,webp,avif}', (req, res) => {
    const filePath = // 获取图片文件路径
    const fileContents = fs.readFileSync(filePath);
    const etag = crypto.createHash('sha256').update(fileContents).digest('hex');
    if (req.headers['if - none - match'] === etag) {
        res.status(304).send();
        return;
    }
    res.set('ETag', etag);
    // 正常返回图片
});

CDN 缓存：
- 如果使用 CDN（如 Vercel 集成了 CDN 功能），CDN 会缓存图片。确保 CDN 配置正确，将图片缓存到距离用户更近的节点。对于自建 CDN（如使用 Cloudflare 等），在其控制台配置合适的缓存规则，针对图片资源设置较长的缓存时间。

3. 不同部署环境下缓存策略差异与调整方法

Vercel：
- 优势：Vercel 对 Next.js 有深度集成，自动为优化后的图片设置合理的缓存策略，包括 Cache - Control 头和 CDN 缓存。图片在全球的边缘节点缓存，加快用户访问速度。
- 调整方法：可以在 vercel.json 文件中进一步自定义缓存策略。例如，通过 headers 字段为特定图片路径设置不同的缓存时间：

{
    "headers": [
        {
            "source": "/_next/static/images/*.{jpg,png,gif,webp,avif}",
            "headers": [
                {
                    "key": "Cache - Control",
                    "value": "max - age = 604800, public"
                }
            ]
        }
    ]
}

自建服务器：
- 差异：需要手动配置缓存策略，包括设置 Cache - Control、ETag 等头信息，以及可能需要搭建或集成 CDN。同时，服务器性能和网络拓扑会影响缓存效果。
- 调整方法：
  - Node.js + Express：如上述代码示例，在 Express 应用中设置缓存相关头信息。
  - Nginx：在 Nginx 配置文件中设置缓存，例如：

location ~* \.(jpg|png|gif|webp|avif)$ {
    expires 365d;
    add_header Cache - Control "public";
}

对于 CDN 集成，需要将自建服务器与 CDN 服务（如 Cloudflare）连接，按照 CDN 提供商的文档配置缓存规则。

星途面试题库

面试题：Next.js 图片优化与自动格式转换的性能调优及缓存策略

知识考点

面试题答案

1. Next.js 图片优化与自动格式转换基础

2. 性能调优 - 缓存策略配置

3. 不同部署环境下缓存策略差异与调整方法