组件缓存
在nuxt
中提供了 bundleRenderer
选项,它会作为vue-server-renderer
中createRenderer
方法的配置。其中cache
对象必须get
和set
方法。
type RenderCache = {
get: (key: string, cb?: Function) => string | void;
set: (key: string, val: string) => void;
has?: (key: string, cb?: Function) => boolean | void;
};
lru-cache
创建的实例包含了get
和set
方法,所以可以直接配置。
export default {
render: {
bundleRenderer: {
cache: require('lru-cache')({
max: 1000,
maxAge: 1000 * 60 * 15
})
}
}
}
然后可缓存组件必须定义一个唯一name
选项。如果渲染结果也依赖于prop
,那么还需要修改serverCacheKey
的计算方式。如果serverCacheKey
明确返回false
,那么就将直接抛弃缓存,重新渲染。
name: 'Date',
serverCacheKey: props => props.item.id,
你也可以安装@nuxtjs/component-cache
,它也是使用lru-cache
实现的组件缓存。但使用lru-cache
在内存中进行缓存的缺点也很明显,开启多进程时每个进程都会缓存一份资源浪费,也有可能出现缓存不一致的情况。
不应缓存的组件
缓存组件必须十分谨慎,下面的组件是不能缓存的:
- 具有可能依赖于全局状态的子组件。
- 有子组件会在渲染上产生副作用context。
参考文章
https://gist.github.com/Tuarisa/b7c07289eb32b2a7a77be270e1c8360f