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 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
JS控制输入框内字符串长度
May 21 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
javascript 实现map集合
Apr 03 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
全面了解addEventListener和on的区别
Jul 14 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 Javascript
Nuxt.js 静态资源和打包的操作
Nov 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
PHPlet在Windows下的安装
2006/10/09 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
护理学毕业生自荐信
2013/10/02 职场文书
科室工作的个人自我评价
2013/10/30 职场文书
八一慰问活动方案
2014/02/07 职场文书
募捐倡议书
2014/04/14 职场文书
环保倡议书500字
2014/05/15 职场文书
军训口号
2014/06/13 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
篮球赛新闻稿
2015/07/17 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
防止web项目中的SQL注入
2021/12/06 MySQL
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs