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
  }
}