作者: zengde 分类: 笔记 发布时间: 2020-10-27 03:59

在使用之前,这个缓存组件并没有默认集成,需要自己安装后才可以使用

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
yarn add lru-cache
yarn add lru-cache
yarn add lru-cache

1.nuxt.config.js

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
module.exports = {
render: {
bundleRenderer: {
cache: require('lru-cache')({
max: 1000,
maxAge: 1000 * 60 * 15
})
}
}
}
module.exports = { render: { bundleRenderer: { cache: require('lru-cache')({ max: 1000, maxAge: 1000 * 60 * 15 }) } } }
module.exports = {
  render: {
    bundleRenderer: {
      cache: require('lru-cache')({
        max: 1000,
        maxAge: 1000 * 60 * 15
      })
    }
  }
}

2.vue页面上要配置一个单页的唯一key,通过serverCacheKey()方法返回这个唯一KEY,示例里面用一个时间值,每10秒变化一次来控制缓存的更新频率

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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请求缓存

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
};
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; };
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进行一个简单的包装,在需要使用的地方再使用

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 运行与服务端的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
}
}
// 运行与服务端的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 } }
// 运行与服务端的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
  }
}

来源:https://www.bbsmax.com/A/MyJxXlmMJn/

zengde个人的小站