vue服务端渲染页面缓存和组件缓存的实例详解


Posted in Javascript onSeptember 18, 2018

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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 #Javascript
vue服务端渲染添加缓存的方法
Sep 18 #Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 #Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 #Javascript
在小程序中使用canvas的方法示例
Sep 17 #Javascript
webpack4打包vue前端多页面项目
Sep 17 #Javascript
node中的密码安全(加密)
Sep 17 #Javascript
You might like
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
详解在vue-cli中使用路由
2017/09/25 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
什么是就业协议书
2014/04/17 职场文书
文化建设工作方案
2014/05/12 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
校运会新闻稿
2015/07/17 职场文书
停车场管理制度范本
2015/08/05 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python