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分钟自动失效
})
