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拖拽一些常见的思路方法整理
Mar 19 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
javascript实现动态时钟的启动和停止
Jul 29 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.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python中return语句用法实例分析
2015/08/04 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python实现图片中文字分割效果
2019/07/22 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
竞聘演讲稿
2014/04/24 职场文书
文明社区申报材料
2014/08/21 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
党员承诺书格式范文
2015/04/28 职场文书