nuxt.js服务端缓存lru-cache
对于部分网页进行服务端的缓存,可以获得更好的渲染性能,但是缓存又涉及到一个数据的及时性的问题,所以在及时性和性能之间要有平衡和取舍。
官方文档里面写的使用方法
按照这个配置,试过了没什么用,但是从文档的另外一个地方示例里的代码是能够正常运行的,需要配置的地方有两个:
在使用之前,这个缓存组件并没有默认集成,需要自己安装后才可以使用
npm install lru-cache -s
1.nuxt.config.js
module.exports = {
render: {
bundleRenderer: {
cache: require('lru-cache')({
max: 1000,
maxAge: 1000 * 60 * 15
})
}
}
}
2.vue页面上要配置一个单页的唯一key,通过serverCacheKey()方法返回这个唯一KEY,示例里面用一个时间值,每10秒变化一次来控制缓存的更新频率
<template>
<div>
<h1>Cached components</h1>
<p>Look at the source code and see how the timestamp is not reloaded before 10s after refreshing the page.</p>
<p>Timestamp: {{ date }}</p>
</div>
</template> <script>
export default {
name: 'date',
serverCacheKey () {
// Will change every 10 secondes
return Math.floor(Date.now() / 10000)
},
data () {
return { date: Date.now() }
}
}
</script>
在我按照文档完成这个范例后,刷新网页,其实这个date并没有10秒更新一次,github上已经有人提出这个问题了,按照作者的说法,如果是chrome浏览器可以通过view-source:http://localhost:3000/这个方式去验证,我试了一下的确是10秒更新一次。
我可能需要的是 asyncData() 通过异步获取其他服务器的数据能够被缓存起来,防止每次只要有用户访问网页,但是这个缓存的配置,并不是缓存了所有的信息,每次访问asyncData()还是会执行,然后服务器获取一遍数据....
lru-cache包含的功能可以自己实现这部分的功能,例如每次的get请求缓存
import axios from 'axios';
import LRU from 'lru-cache'; const cache = LRU({
max: 1000,
maxAge: 1000 * 10,
}); export const get = async (url) => {
let data = cache.get(url);
if (data) {
return JSON.parse(data);
}
const res = await axios.get(url);
data = res.data;
cache.set(url, JSON.stringify(data));
return data;
};
或者只对lru-cache进行一个简单的包装,在需要使用的地方再使用
// 运行与服务端的js
// node.js lru-cache
import LRU from 'lru-cache' const lruCache = LRU({
// 缓存队列长度
max: 2000,
// 缓存有效期
maxAge: 60000
}) export const cache = {
get: function (key) {
let result = lruCache.get(key) if (result) {
return JSON.parse(result)
} return null
},
set: function (key, value) {
if (value) {
lruCache.set(key, JSON.stringify(value)) return true
} return false
}
}
nuxt.js服务端缓存lru-cache的更多相关文章
- 服务端缓存HttpRuntime.Cache的使用
HttpRuntime.Cache.Insert("缓存key", "缓存content", null, DateTime.Now.AddMinutes(3), ...
- Nuxt.js服务端渲染实践,从开发到部署
感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...
- nuxt.js服务端渲染中less的配置和使用
第一步:npm 安装 less 和 less-loader ,文件根目录下安装,指令如下 npm install less less-loader --save-dev 第二步:直接在组件中使用 &l ...
- ASP.NET Core 与 Vue.js 服务端渲染
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...
- node.js服务端程序在Linux上持久运行
如果要想在服务端部署node.js程序,让其持久化运行,就不能单单使用npm start命令运行,当然了,这样运行是毫无问题的,但是当关闭xshell窗口或者是关闭进程的时候(其实关闭xshell窗口 ...
- NET Core 与 Vue.js 服务端渲染
NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...
- vue.js 服务端渲染nuxt.js反向代理nginx部署
vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之 ...
- Vue.js 服务端渲染业务入门实践
作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...
- nuxt项目服务端渲染应用部署、使用pm2守护进程及遇到的问题处理
服务端渲染应用部署应该先编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 我们已经在pakage.json里配置好script命令 { &q ...
随机推荐
- JVM基础知识1--JAVA内存区域与内存溢出异常
1,运行时数据区域 根据JAVA虚拟机规范的规定:JAVA虚拟机所管理的内存将会包括以下几个运行时数据区域 程序计数器(Program Counter Register)是一块较小的内存空间,它的作用 ...
- Have启动报错:java.lang.RuntimeException: Unable to instantiate org.apache.hadoop.hive.ql.metadata.SessionHiveMetaStoreClient
错误日志如下: [hadoop@master hive1.0.0]$ bin/hive Logging initialized using configuration in file:/opt/mod ...
- 通过Maven管理多个MapReduce项目
1. 配置Maven环境 首先检查Windows是否配置了maven,进入cmd命令行,输入mvn -version命令,如果出现下图所示的 情形则表示满意配置maven. 从浏览器进入maven官网 ...
- Java中的do-while循环——通过示例学习Java编程(11)
作者:CHAITANYA SINGH 来源:https://www.koofun.com/pro/kfpostsdetail?kfpostsid=22&cid=0 在上一篇教程中,我们讨论了w ...
- centos yum 安装mysql5.7 以及 默认root密码查看
1. 首先更新rpm 从MySQL Yum仓库下载最新的rpm文件:http://dev.mysql.com/downloads/repo/yum/ (需要Oracle帐号以及填写一些使用信息,才能 ...
- 方法和函数,isinstance/issubclass/type以及反射
一丶,isinstance/issubclass/type 1.issubclass检查第一个参数是否是第二个参数的 子子孙孙类 class Foo(): pass class Boo(Foo): p ...
- Android list加载图片工具类
总体思路 Handler + looper + message 核心类 package com.base.imagechoose.util; import android.graphics.Bitma ...
- java 多线程的经验总结
什么是线程? 线程是操作系统所能运算调度的最小单元,包含于进程之中,作为进程的实际运作单位:线程与进程的区别,线程是进程的子集,一个进程可以有多个线程,每个线程并行执行不同的任务,不同的进程使用不同的 ...
- zip man man.config
zip man man.config zip -r zip1 man.config man.zip gzip a tar -cvf test.tar /home/* tar -tf test.tar ...
- meterpreter > sysinfo
meterpreter > sysinfoComputer : test-VCS86VROS : Windows XP (Build 2600).Architecture : x86System ...