面试题：Node.js Express 静态文件服务的优化与缓存控制

Question

在 Express 实现的静态文件服务场景下，如何合理设置缓存头以优化性能？假设静态文件内容更新频率较低，描述实现长期缓存的策略及代码实现。同时，说明在文件发生变化时如何确保客户端获取到最新版本。

Answer 1

长期缓存策略

1. 设置缓存头：对于静态文件更新频率较低的情况，可以通过设置 Cache-Control 和 Expires 头来实现长期缓存。Cache-Control 是 HTTP/1.1 协议中的头字段，Expires 是 HTTP/1.0 协议中的头字段，为了兼容性，通常两个都设置。
   • Cache-Control：可以设置 max - age 来指定缓存的最大有效时间（单位为秒）。例如，设置一年的缓存时间，max - age 可以设为 31536000（一年按 365 天，每天 24 小时，每小时 3600 秒计算）。还可以设置 public 表示允许任何缓存（包括代理服务器）缓存该资源，immutable 表示资源一旦缓存就不会改变，除非缓存过期。
   • Expires：设置一个绝对的过期时间，格式为 HTTP 日期格式。例如，设置一年后的日期。

代码实现

使用 Express 实现静态文件服务并设置长期缓存头，可以通过 express.static 中间件结合 set 方法来设置头信息。以下是示例代码：

const express = require('express');
const app = express();

// 设置静态文件目录为 'public'
app.use('/static', express.static('public', {
  setHeaders: (res, path) => {
    // 设置 Cache - Control 头
    res.set('Cache - Control', 'public, max - age = 31536000, immutable');
    // 设置 Expires 头，计算一年后的日期
    const oneYearFromNow = new Date(Date.now() + 31536000 * 1000);
    res.set('Expires', oneYearFromNow.toUTCString());
  }
}));

const port = 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

文件变化时确保客户端获取最新版本

1. 文件名哈希：在构建过程中，对静态文件进行哈希处理，并将哈希值包含在文件名中。例如，styles.css 变为 styles.1234567890abcdef.css，其中 1234567890abcdef 是根据文件内容生成的哈希值。当文件内容改变时，哈希值也会改变，文件名就会不同。在 HTML 等页面引用静态文件时，使用新的文件名，这样客户端请求的就是新的文件，即使之前缓存了旧版本，由于 URL 变化，也会获取最新版本。
2. 查询参数：在引用静态文件的 URL 中添加查询参数，例如 styles.css?v = 2，每次文件更新时，手动更改 v 的值。但是这种方法需要手动更新查询参数，不太适合自动化构建场景，而文件名哈希更适合自动化流程。