Nuxt页面级缓存的实现

 更新时间:2020年03月09日 11:59:32   作者:大洋洋2020  
这篇文章主要介绍了Nuxt页面级缓存的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

虽然 Vue 的服务器端渲染 (SSR) 相当快速,但是由于需要为每次请求为了避免交叉请求状态污染,都创建一个新的根Vue实例,创建组件实例和虚拟 DOM 节点的开销,无法与纯基于字符串拼接的模板的性能相当。在 SSR 性能至关重要的情况下,明智地利用缓存策略,可以极大改善响应时间并减少服务器负载。同时还可以大大减少后端接口服务器的负载。

vue SSR指南 中,缓存有两种,分为页面级缓存和组件级缓存。本次讲的是页面缓存,如果内容不是用户特定的并且在相对较短时间内,页面内容不需要更新。我们就可以使用页面缓存。对于页面级缓存我们可以通过这段koa服务器的代码大概知道缓存的思路:

const microCache = LRU({
 max: 100,
 maxAge: 1000 // 重要提示:条目在 1 秒后过期。
})

const isCacheable = req => {
 // 实现逻辑为,检查请求是否是用户特定(user-specific)。
 // 只有非用户特定 (non-user-specific) 页面才会缓存
}

server.get('*', (req, res) => {
 const cacheable = isCacheable(req)
 if (cacheable) {
 const hit = microCache.get(req.url)
 if (hit) {
  return res.end(hit)
 }
 }

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

流程图如下:

上面的代码为vue的ssr渲染提供了方案,但是对于使用nuxt框架的同学而言,用脚手架初始化完,框架对于vue服务端渲染的res.end()函数做了高度封装,从下图nuxt在接收到请求后进行渲染的流程可以看出,nuxt主要是通过nuxtMiddleware调用renderRoute()来进行渲染的:

那么我们是否可以通过重写renderRoute()这个api拦截其内部渲染逻辑,在渲染之前加上缓存呢? nuxt-ssr-cache 插件已经这样做了。我们来看一下这个nuxt模块核心部分的源码:

const renderer = nuxt.renderer;
const renderRoute = renderer.renderRoute.bind(renderer);
renderer.renderRoute = function(route, context) {
 // hopefully cache reset is finished up to this point.
 tryStoreVersion(cache, currentVersion);

 const cacheKey = (config.cache.key || defaultCacheKeyBuilder)(route, context);
 if (!cacheKey) return renderRoute(route, context);

 function renderSetCache(){
  return renderRoute(route, context)
   .then(function(result) {
    if (!result.error) {
     cache.setAsync(cacheKey, serialize(result));
    }
    return result;
   });
 }

 return cache.getAsync(cacheKey)
  .then(function (cachedResult) {
   if (cachedResult) {
    return deserialize(cachedResult);
   }

   return renderSetCache();
  })
  .catch(renderSetCache);
};

在这段代码中,先保存了renderer原来的renderRoute代码,之后又重写了renderRoute代码,返回了一个通过cache缓存来获取缓存内容的逻辑。cache返回了一个promise,如果是resolve的,并且有缓存的内容,就直接返回缓存内容。如果没有缓存内容或者reject,就执行renderSetCache()。而renderSetCache()中,返回了原来最初的renderRoute()处理逻辑,同样如果renderRoute()返回的promise被resolve了,那么就通过cache的setAsync方法来进行缓存,之后返回渲染结果。

使用方法大家自行参考git中的readme文档,这里就不说了。

下面我们真正来仿真一下,看看这个模块的功效到底如何。我们通过ab命令

ab -n 4000 -c 50 -s 120 -r http://localhost:3000/

来进行压测:

第一种情况,没有添加页面缓存,大约持续请求了10秒钟,执行到3600个请求的时候,发生错误,不再继续请求了:

我们来通过日志看下是什么错误:

可以看到FATAL ERROR这一句,JavaScript heap out of memory。堆内存已经没有办法再进行分配,所以进程终止了。

我们在终止之前通过进程监视器可以看到node进程已经彪到了1.7GB的内存。

第二种情况,我们添加了页面缓存,通过server端的日志,我们可以看出,只请求了一次后端的api数据接口,说明缓存已经成功拦截了页面请求。请求数据如下:

在2秒钟之内,就顺利结束了4000个请求,内存没有任何明显波动,优化效果显而易见。

到此这篇关于Nuxt页面级缓存的实现的文章就介绍到这了,更多相关Nuxt 页面级缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • 解决vue做详情页跳转的时候使用created方法 数据不会更新问题

    解决vue做详情页跳转的时候使用created方法 数据不会更新问题

    这篇文章主要介绍了解决vue做详情页跳转的时候使用created方法 数据不会更新问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue之计算属性的缓存computed的用法解读

    vue之计算属性的缓存computed的用法解读

    这篇文章主要介绍了vue之计算属性的缓存computed的用法解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • VUE element上传动态设置action路径和参数的坑及解决

    VUE element上传动态设置action路径和参数的坑及解决

    这篇文章主要介绍了VUE element上传动态设置action路径和参数的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue+tsc+noEmit导致打包报TS类型错误问题及解决方法

    vue+tsc+noEmit导致打包报TS类型错误问题及解决方法

    当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题,本文给大家分享vue+tsc+noEmit导致打包报TS类型错误问题及解决方法,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue通过ref获取dom元素属性的方法

    Vue通过ref获取dom元素属性的方法

    这篇文章主要介绍了Vue通过ref获取dom元素属性的方法,文中有详细的方法介绍,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • vue3如何避免样式污染的方法示例

    vue3如何避免样式污染的方法示例

    本文主要介绍了vue3如何避免样式污染的方法示例,使用scoped可以避免父组件的样式渗透到子组件中,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-09-09
  • VUE3学习教程之全局组件和局部组件

    VUE3学习教程之全局组件和局部组件

    组件(Component)是Vue.js最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于VUE3学习教程之全局组件和局部组件的相关资料,需要的朋友可以参考下
    2022-01-01
  • Vue3.0中的monorepo管理模式的实现

    Vue3.0中的monorepo管理模式的实现

    这篇文章主要介绍了Vue3.0中的monorepo管理模式的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Mixin混入分发Vue组件可复用功能基础示例

    Mixin混入分发Vue组件可复用功能基础示例

    这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue多环境配置之 .env配置文件详解

    vue多环境配置之 .env配置文件详解

    .env文件是vue运行项目时的环境配置文件,这篇文章主要介绍了vue多环境配置之 .env配置文件,需要的朋友可以参考下
    2023-03-03

最新评论