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父窗口控制只弹出一个子窗口
Apr 10 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js获取页面description的方法
May 21 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
PHP如何编写易读的代码
2007/07/10 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
些很实用且必用的小脚本代码
2006/06/26 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python插入排序算法实例分析
2015/07/03 Python
python调用百度语音识别api
2018/08/30 Python
基于python中theano库的线性回归
2018/08/31 Python
python requests.post带head和body的实例
2019/01/02 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
linux安装python修改默认python版本方法
2019/03/31 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
Python 实现一个计时器
2020/07/28 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
巡警年度自我鉴定
2014/02/21 职场文书
学习雷锋标语
2014/06/25 职场文书
节水倡议书
2015/01/19 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
护士实习自荐信
2015/03/06 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
工作时间调整通知
2015/04/24 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
无罪辩护词范文
2015/05/21 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript