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判断输入是否为数字的具体实例
Aug 03 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
在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生成缩略图的代码
2011/01/12 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php中动态修改ini配置
2014/10/14 PHP
php实现微信发红包
2015/12/05 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
kaggle+mnist实现手写字体识别
2018/07/26 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
详解Django admin高级用法
2019/11/06 Python
python向图片里添加文字
2019/11/26 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
什么是python的必选参数
2020/06/21 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
台湾最大网路书店:博客来
2018/03/18 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
成龙霸王洗发水广告词
2014/03/14 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
浅谈redis缓存在项目中的使用
2021/05/20 Redis
nginx.conf配置文件结构小结
2022/04/08 Servers