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 RadioButtonList获取选中值
Apr 09 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
ES6扩展运算符的用途实例详解
Aug 20 Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
JavaScript实现显示和隐藏图片
Apr 29 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处理换行符的问题 \r\n
2013/06/13 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
jquery操作cookie插件分享
2014/01/14 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
python3.0 字典key排序
2008/12/24 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python定时器实例代码
2017/11/01 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
供用电专业求职信
2014/07/07 职场文书
答谢酒会主持词
2015/07/02 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
nginx安装以及配置的详细过程记录
2021/09/15 Servers