nuxt2 精确控制静态文件的缓存时间

在 Web 应用中，合理设置缓存策略对提升用户体验和减轻服务器负担至关重要。Nuxt2 提供了多种方式来控制静态资源和页面的缓存时间。本文将详细介绍如何在 Nuxt2 项目中精确控制缓存。

对页面配置缓存响应头

通过服务器中间件，我们可以为所有页面设置统一的缓存策略。

在 nuxt.config.js 中配置：

{
  serverMiddleware: [
    '~/middleware/cache.js'
  ],
}

创建 middleware 并添加一个中间件文件 cache.js：

如果需要对不同的页面设置不同的缓存策略，可以在中间件中进行路径判断：

export default function (req, res, next) {
  // 首页缓存时间较短
  if (req.url === '/' || req.url === '/index.html') {
    res.setHeader('Cache-Control', 'public, max-age=3600'); // 1小时
  } 
  // 文章页面缓存时间较长
  else if (req.url.startsWith('/blog/')) {
    res.setHeader('Cache-Control', 'public, max-age=86400'); // 1天
  } 
  // 其他页面使用默认缓存时间
  else {
    res.setHeader('Cache-Control', `public, max-age=${86400 * 7}`); // 7天
  }
  next();
}

针对所有的静态文件配置缓存响应头

在 nuxt.config.js 中的 render 选项可以精确控制静态资源的缓存策略：


render: {
  http2: {
    push: true
  },
  headers: {
    // 全局默认缓存策略（30天）
    'Cache-Control': 'public, max-age=2592000'
  },
  static: {
    // 只对静态文件生效
    // maxAge: '1y', // 设置缓存时间为1年
    // 只对静态文件生效
    // maxAge: '1y', // 设置缓存时间为1年
    setHeaders(res, path) {
      // 图片和其他媒体文件缓存1年
      if (['.jpg', '.jpeg', '.png', '.ico', '.gif', '.svg', '.webp'].some(key => path.includes(key))) {
        res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
      } 
      // CSS和JS文件缓存1个月
      else if (['.css', '.js'].some(key => path.includes(key))) {
        res.setHeader('Cache-Control', 'public, max-age=2592000');
      }
      // 字体文件缓存1年
      else if (['.woff', '.woff2', '.ttf', '.eot'].some(key => path.includes(key))) {
        res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
      }
      // 其他静态资源缓存7天
      else {
        res.setHeader('Cache-Control', `public, max-age=${86400 * 7}`);
      }
    }
  }
},

缓存参数说明

Cache-Control 头部可以包含多个指令，以下是常用的几个：

public : 表示响应可以被任何缓存存储
private : 表示响应只能被浏览器缓存，不能被中间代理缓存
max-age= : 缓存的最大有效时间（秒）
no-cache : 强制每次请求都向服务器验证缓存是否有效
no-store : 完全不使用缓存
immutable : 表示资源内容不会改变，可以跳过重新验证

常用缓存时间参考

1小时: 3,600秒
1天: 86,400秒
1周: 604,800秒
1个月: 2,592,000秒
1年: 31,536,000秒

最佳实践

频繁变动的内容：设置较短的缓存时间或使用 no-cache
不常变动的静态资源：设置较长的缓存时间，并使用内容哈希命名
永不变动的资源：使用 immutable 标记，并设置超长缓存时间
HTML页面：通常设置较短的缓存时间，确保内容及时更新通过合理配置缓存策略，可以显著提高网站性能和用户体验，同时减轻服务器负担。

注意事项

设置长缓存时间的资源应该使用版本号或内容哈希命名，以便在更新时强制客户端重新获取
对于关键页面，可以使用 stale-while-revalidate 策略，在后台更新缓存
在开发环境中，通常应该禁用缓存以便及时看到更改

nuxt2 精确控制静态文件的缓存时间

学习如何在 Nuxt2 项目中精确控制静态资源和页面的缓存时间，提高网站性能和用户体验