面试题：Next.js 静态资源加载的缓存控制优化

在Next.js中配置缓存控制头优化静态资源加载性能

基础概念 缓存控制头（Cache-Control headers）用于告知浏览器如何缓存和重用资源。常见指令有 public（资源可被任何缓存（包括中间代理）缓存），private（仅用户代理（浏览器）可缓存），max-age（设置资源在缓存中保持有效的最大秒数）等。
Next.js 配置方式 在 Next.js 中，可以通过 next.config.js 文件来配置缓存控制头。

针对不同类型静态资源的缓存策略

CSS：
- 对于不会频繁变动的 CSS 文件，可以设置较长的缓存时间。例如，设置 max-age 为一年（约 31536000 秒），并标记为 public，这样中间代理和浏览器都能缓存。
```
// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/css/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ];
  }
};
```
- immutable 指令表示只要资源的URL不变，浏览器可以一直使用缓存，即使 max-age 过期。这非常适合不变的CSS文件。

JavaScript：

类似CSS，对于稳定的JavaScript文件，也可设置较长缓存时间。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/chunks/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ];
  }
};

但如果有部分JavaScript文件会频繁更新（例如用于实时功能的脚本），则需要设置较短的 max-age，如 max-age=60（1分钟），并标记为 private，让浏览器缓存但防止中间代理长期缓存。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/special-scripts/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'private, max-age=60'
          }
        ]
      }
    ];
  }
};

图片：

对于一般的图片（如品牌logo、长期不变的背景图等），可设置较长缓存时间。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable'
          }
        ]
      }
    ];
  }
};

对于用户生成的图片或者经常变动的图片（如产品展示图可能随库存变化），设置较短的 max-age，如 max-age=3600（1小时），并可标记为 private。

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/user-images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'private, max-age=3600'
          }
        ]
      }
    ];
  }
};

兼顾资源更新及时性 为了确保资源更新时浏览器能及时获取新内容，Next.js 会在构建时为静态资源文件名添加哈希值。例如，styles.css 可能变为 styles.[hash].css。这样，当资源内容改变时，哈希值改变，浏览器会将其视为新资源，不会使用旧缓存。同时，结合较短 max-age 设置的动态资源，也能及时获取更新。

星途面试题库

面试题：Next.js 静态资源加载的缓存控制优化

知识考点

面试题答案

在Next.js中配置缓存控制头优化静态资源加载性能