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 相关文章推荐
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
javascript动态创建链接的方法
May 13 Javascript
如何提高javascript加载速度
Dec 26 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
javascript将url解析为json格式的两种方法
Aug 18 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
react中Suspense的使用详解
Sep 01 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
在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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python处理大数字的方法
2015/05/27 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python pandas常用函数详解
2018/02/07 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python Django的web开发实例(入门)
2019/07/31 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Linux的文件类型
2012/03/07 面试题
银行实习人员自我鉴定
2013/09/22 职场文书
小学教师师德感言
2014/02/10 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
2015员工年度考核评语
2015/03/25 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
JAVA springCloud项目搭建流程
2022/05/11 Java/Android
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js