vue服务端渲染添加缓存的方法


Posted in Javascript onSeptember 18, 2018

什么是服务器端渲染(SSR)?

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。

缓存

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

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

页面缓存 :

在server.js中设置

const LRU = require('lru-cache')
const microCache = LRU({
 max: 100, // 最大缓存的数目
 maxAge: 1000 // 重要提示:条目在 1 秒后过期。
})
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(`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中设置如下:

function createRenderer(bundle, template) {
 return require('vue-server-renderer').createBundleRenderer(bundle, {
  template,
  cache: LRU({
   max: 1000,
   maxAge: 1000 * 60 * 5 // 组建缓存时间
  })
 })
}
let renderer
if (isProd) {
 // 生产环境使用本地打包文件来渲染
 const bundle = require('./output/vue-ssr-bundle.json')
 const template = fs.readFileSync(resolve('./output/index.html'), 'utf-8')
 renderer = createRenderer(bundle, template)
} else {
 // 开发环境使用webpack热更新服务
 require('./build/dev-server')(app, (bundle, template) => {
  renderer = createRenderer(bundle, template)
 })
}

要缓存的组建

export default {
 name: 'Home',
 title() {
  return {
   title: 'vue-ssr',
   keywords: 'vue-ssr服务端脚手架, home',
   description: 'vue-ssr-template, vue-server-renderer, home'
  }
 },
 created() {
 },
 computed: {},
 asyncData({ store }) {},
 methods: {},
 serverCacheKey: props => props.id
}

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

接口缓存:

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

import qs from 'qs'
import axios from 'axios'
import md5 from 'md5'
import LRU from 'lru-cache'
const microCache = LRU({ 
max: 100,

maxAge: 5000 // 设置数据多久过期
})
export function createAPI({baseUrl, timeout}) {
let api
if (process.__API__) { api = process.__API__ } else {
// 定义全局变量 process.__API__
  api = process.__API__ = {
   get(url, params = {}) {
    const key = md5(url + JSON.stringify(params))
    // 判断是否有缓存,直接返回缓存结果
    if (params.cache && microCache.get(key)) {
     console.log('返回缓存')
     return Promise.resolve(microCache.get(key))
    }
    return new Promise((resolve, reject) => {
     axios({
      url,
      params,
      headers: {
       'X-Requested-With': 'XMLHttpRequest'
       // 'Cookie': parseCookie(SSR.cookies)
      },
      method: 'get'
     }).then(res => {
      // 判断是否需要缓存 如果需要缓存缓存数据
      if (params.cache && microCache) {
       microCache.set(key, res.data)
      }
      console.log('返回新数据')
      resolve(res.data)
     }).catch(error => {
      reject(error)
     })
    })
   },
   post(url, params = {}) {
    const key = md5(url + JSON.stringify(params))
    // 判断是否有缓存,直接返回缓存结果
    if (params.cache && microCache.get(key)) {
     return Promise.resolve(microCache.get(key))
    }
    return new Promise((resolve, reject) => {
     axios({
      url,
      data: qs.stringify(params),
      method: 'post',
      headers: {
       'X-Requested-With': 'XMLHttpRequest',
       'Content-Type': 'application/x-www-form-urlencoded'
       // 'Cookie': parseCookie(SSR.cookies)
      }
     }).then(res => {
      // 判断是否需要缓存 如果需要缓存缓存数据
      if (params.cache && microCache) {
       microCache.set(key, res.data)
      }
      resolve(res.data)
     }).catch(error => {
      reject(error)
     })
    })
   }
  }
 }
return api
}

总结

以上所述是小编给大家介绍的vue服务端渲染添加缓存的方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 #Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 #Javascript
在小程序中使用canvas的方法示例
Sep 17 #Javascript
webpack4打包vue前端多页面项目
Sep 17 #Javascript
node中的密码安全(加密)
Sep 17 #Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 #Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 #Javascript
You might like
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php简单的上传类分享
2016/05/15 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
可以将word转成html的js代码
2010/04/11 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
vuejs选中当前样式active的实例
2018/08/22 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
Python文件和目录操作详解
2015/02/08 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Django静态文件加载失败解决方案
2020/08/26 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
公开服务承诺制度
2014/03/26 职场文书
无毒社区工作方案
2014/05/23 职场文书
党员领导干部承诺书
2014/05/28 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
浅析Django接口版本控制
2021/06/26 Python