node实现vue页面缓存

使用 vue-server-renderer 实现服务端缓存

在 Node.js 中通过 vue-server-renderer 的 createBundleRenderer 实现页面缓存。配置 cache 选项可缓存渲染结果，减少重复渲染开销。

const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(serverBundle, {
  cache: require('lru-cache')({
    max: 1000, // 缓存最大条目数
    maxAge: 1000 * 60 * 15 // 缓存15分钟
  })
})

组件级缓存配置

在 Vue 组件中添加 serverCacheKey 函数或 name 属性，决定缓存键。组件需为纯静态或无依赖动态数据。

export default {
  name: 'MyComponent',
  serverCacheKey: props => props.id, // 根据props.id生成缓存键
  props: ['id']
}

使用 micro-caching 优化高频请求

对高频访问页面采用短期缓存（1-2分钟），通过 lru-cache 快速响应重复请求。

const microCache = new LRU({
  max: 100,
  maxAge: 1000 * 60 // 1分钟缓存
})

app.get('*', (req, res) => {
  const hit = microCache.get(req.url)
  if (hit) return res.end(hit)

  renderer.renderToString((err, html) => {
    if (!err) microCache.set(req.url, html)
    res.end(html)
  })
})

动态数据与缓存失效处理

对于含动态数据的页面，通过版本号或时间戳强制更新缓存。

// 在渲染上下文注入版本号
context.version = dataVersion

// 组件内根据版本更新缓存
serverCacheKey: props => `${props.id}::${this.$ssrContext.version}`

避免内存泄漏的缓存策略

限制缓存大小与存活时间，避免长期占用内存。lru-cache 会自动淘汰最久未使用的条目。

new LRU({
  max: 500, // 最大500条
  maxAge: 1000 * 60 * 30 // 30分钟自动失效
})