如何使用 express.static 的 maxAge 选项优化静态文件缓存？

推荐答案

// www.javascriptcn.com code example
const express = require('express');
const app = express();

// 设置静态文件目录，并使用 maxAge 选项优化缓存
app.use(express.static('public', {
  maxAge: '1d' // 设置缓存时间为1天
}));

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

本题详细解读

1. express.static 的作用

express.static 是 Express 框架中用于托管静态文件的中间件。它可以将指定目录下的文件（如图片、CSS、JavaScript 文件等）直接提供给客户端，而不需要额外的路由处理。

2. maxAge 选项的作用

maxAge 选项用于设置静态文件的缓存时间。通过设置 maxAge，可以控制客户端浏览器缓存这些文件的时间长度，从而减少重复请求，提升页面加载速度。

• 参数类型：maxAge 可以接受一个字符串或数字。
  • 字符串：如 '1d' 表示1天，'2h' 表示2小时。
  • 数字：以毫秒为单位，如 86400000 表示1天（24小时）。

3. 缓存优化

通过设置 maxAge，浏览器会在指定的时间内缓存这些静态文件。在此期间，如果用户再次访问相同的页面，浏览器会直接从本地缓存中加载这些文件，而不需要再次向服务器请求，从而减少了网络请求的数量，提升了页面加载速度。

4. 注意事项

• 缓存更新：如果静态文件内容发生变化，可能需要通过更改文件名或使用版本号来强制客户端重新加载文件。
• 缓存时间选择：根据实际需求选择合适的缓存时间，过长可能导致用户无法及时获取更新，过短则无法有效减少请求。