vue缓存分为页面缓存、组建缓存、接口缓存，这里我主要说到了页面缓存和组建缓存
页面缓存：
在server.js中设置
const isCacheable = req => {
//判断是否需要页面缓存
if (req.url && req.url === '/') {
return req.url
} else {
return false
}
}
app.get('*',(req,res) => {
const cacheable = isCacheable(req)
if (cacheable) {
const hit = microCache.get(req.url)
if (hit) {
return res.end(hit)
}
}
const errorHandler = err => {
if (err && err.code === 404) {
// 未找到页面
res.status(404).sendfile('public/404.html');
} else {
// 页面渲染错误
res.status(500).end('500 - Internal Server Error')
console.error(
console.error(err)
}
}
const context = {
title: 'vue',keywords: 'vue-ssr服务端脚手架',description: 'vue-ssr-template,vue-server-renderer',version: v,url: req.url,cookies: req.cookies
}
renderer.renderToString(context,(err,html) => {
if (err) {
return errorHandler(err)
}
res.end(html)
microCache.set(req.url,html) // 设置当前缓存页面的内容
})
})
//判断是否需要页面缓存
if (req.url && req.url === '/') {
return req.url
} else {
return false
}
}
app.get('*',(req,res) => {
const cacheable = isCacheable(req)
if (cacheable) {
const hit = microCache.get(req.url)
if (hit) {
return res.end(hit)
}
}
const errorHandler = err => {
if (err && err.code === 404) {
// 未找到页面
res.status(404).sendfile('public/404.html');
} else {
// 页面渲染错误
res.status(500).end('500 - Internal Server Error')
console.error(
error during render : ${req.url})console.error(err)
}
}
const context = {
title: 'vue',keywords: 'vue-ssr服务端脚手架',description: 'vue-ssr-template,vue-server-renderer',version: v,url: req.url,cookies: req.cookies
}
renderer.renderToString(context,(err,html) => {
if (err) {
return errorHandler(err)
}
res.end(html)
microCache.set(req.url,html) // 设置当前缓存页面的内容
})
})
组建缓存：
在server.js中设置如下：
{
renderer = createRenderer(bundle,template)
})
}
要缓存的组建
props.id
}
serverCacheKey 返回的 key 应该包含足够的信息，来表示渲染结果的具体情况。如果渲染结果仅由 props.item.id 决定，则上述是一个很好的实现。但是，如果具有相同 id 的 item 可能会随时间而变化，或者如果渲染结果依赖于其他 prop，则需要修改 serverCacheKey 的实现，以考虑其他变量。如果 serverCacheKey返回常量将导致组件始终被缓存，这对纯静态组件是有好处的。
总结
以上所述是小编给大家介绍的vue服务端渲染页面缓存和组件缓存的实例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/30132.html