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 相关文章推荐
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
从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
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
html下载本地
2006/06/19 Javascript
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
python抖音表白程序源代码
2019/04/07 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
医学类个人求职信范文
2014/02/05 职场文书
小班上学期评语
2014/05/05 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python