vue服务端渲染缓存应用详解


Posted in Javascript onSeptember 12, 2018

服务端渲染简介

服务端渲染不是一个新的技术;在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲染为页面返回,这样的服务端渲染有个缺点就是一旦要查看新的页面,就需要请求服务端,刷新页面。

但如今的前端,为了追求一些体验上的优化,通常整个渲染在浏览器端使用 JS 来完成,配合 history.pushState 等方式来做单页应用(SPA: Single-Page Application),也收到不错的效果,但是这样还是有一些缺点:第一次加载过慢,用户需要等待较长时间来等待浏览器端渲染完成;对搜索引擎爬虫等不友好。这时候就出现了类似于 React,Vue 2.0 等前端框架来做服务端渲染。

本文重点给大家介绍vue服务端渲染缓存应用,先看下vue缓存分为哪几种吧。

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返回常量将导致组件始终被缓存,这对纯静态组件是有好处的。

总结

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

Javascript 相关文章推荐
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
vue的for循环使用方法
Feb 12 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 #Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 #Javascript
详解JavaScript中操作符和表达式
Sep 12 #Javascript
JS 数组随机洗牌的实例代码
Sep 12 #Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 #Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 #Javascript
Vue弹出菜单功能的实现代码
Sep 12 #Javascript
You might like
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
详细讲解JS节点知识
2010/01/31 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
学习jQuey中的return false
2015/12/18 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
深入理解python try异常处理机制
2016/06/01 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python实现杨氏矩阵查找
2019/03/02 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python实现网站微信登录的示例代码
2019/09/18 Python
python yield关键词案例测试
2019/10/15 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
感恩之星事迹材料
2014/05/03 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
开会通知短信大全
2015/04/20 职场文书