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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
AngularJS自动表单验证
Feb 01 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
JS的深浅复制详细
Oct 16 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
解析数组非数字键名引号的必要性
2013/08/09 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php验证码生成器
2017/05/24 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
使用python爬取B站千万级数据
2018/06/08 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
培训主管的职业生涯规划
2014/03/06 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
《检阅》教学反思
2016/02/22 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang