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秒

最佳实践

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

注意事项

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

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

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