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 面向对象(二)封装代码
May 23 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
javascript回到顶部特效
Jul 30 Javascript
js常用DOM方法详解
Feb 04 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
Vuejs实现购物车功能
Nov 05 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
重新认识php array_merge函数
2014/08/31 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP的自定义模板引擎
2017/03/24 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
js document.write()使用介绍
2014/02/21 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
Angular排序实例详解
2017/06/28 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
详解Python3中的Sequence type的使用
2015/08/01 Python
简单实现python进度条脚本
2017/12/18 Python
python查看数据类型的方法
2019/10/12 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
八年级物理教学反思
2014/01/19 职场文书
小学运动会表扬稿
2014/01/19 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
黄金酒广告词
2014/03/21 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
实习推荐信
2014/05/10 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers