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 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
javascript  数组排序与对象排序的实例
Jul 17 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP导入导出Excel代码
2015/07/07 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
layui实现三级联动效果
2019/07/26 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python抓取最新博客内容并生成Rss
2015/05/17 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python+flask实现API的方法
2018/11/21 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
大型晚会策划方案
2014/02/06 职场文书
红色电影观后感
2015/06/18 职场文书
放假通知怎么写
2015/08/18 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Java 数组的使用
2022/05/11 Java/Android
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python
Fluentd搭建日志收集服务
2022/09/23 Servers