vue服务端渲染添加缓存

原创 年树先生 随笔 前端面试 6287阅读 24 天前 举报

虽然 Vue 的服务器端渲染(SSR)相当快速,但是由于创建组件实例和虚拟 DOM 节点的开销,无法与纯基于字符串拼接(pure string-based)的模板的性能相当。在 SSR 性能至关重要的情况下,明智地利用缓存策略,可以极大改善响应时间并减少服务器负载。

vue服务区缓存分为页面缓存、组建缓存和接口缓存
image.png
页面缓存:

在server.js中设置

组建缓存:

在server.js中设置如下:

要缓存的组建

serverCacheKey 返回的 key 应该包含足够的信息,来表示渲染结果的具体情况。如果渲染结果仅由 props.item.id 决定,则上述是一个很好的实现。但是,如果具有相同 id 的 item 可能会随时间而变化,或者如果渲染结果依赖于其他 prop,则需要修改 serverCacheKey 的实现,以考虑其他变量。如果 serverCacheKey返回常量将导致组件始终被缓存,这对纯静态组件是有好处的。

接口缓存:

在create-api-server.js中设置缓存

const microCache = LRU({ <br> max: 100,<br> maxAge: 5000 // 设置数据多久过期<br>})

export function createAPI({baseUrl, timeout}) {
let api

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复