# 组件缓存
Vue的SSR已经非常快,但由于创建组件实例和 Virtual DOM节点的成本,它无法与纯粹基于字符串的模板的性能相匹配。在SSR性能至关重要的情况下,合理地利用缓存策略可以大大缩短响应时间并减少服务器负载。
# 安装 @nuxtjs/component-cache
npm i @nuxtjs/component-cache --save
# 配置nuxt.config.js
module.exports = {
mode: 'universal',
...
modules:[
['@nuxtjs/component-cache', {
// 缓存组件的最大数量
max: 10000,
// 缓存组件的有效期
maxAge: 1000 * 60 * 60
}]
],
...
}
# 使用组件缓存
要想在服务端缓存组件缓存,组件需要满足以下两个个条件:
- 可缓存组件必须定义唯一 name 选项。
- 并提供 serverCacheKey。
组件又可分为纯静态组件、动态组件。这里的纯静态组件是指不依赖外部数据数据输入的组件。动态组件是指依赖组件的属性值有不同展现形式的组件。这两种组件需要做不同的 serverCacheKey 实现
# 纯静态组件实现缓存
<template>
<div>
静态组件
</div>
</template>
<script>
export default {
name: 'Static',
serverCacheKey() {
// 因为不依赖外部输入,内容固定不变,则可以直接返回一个固定字符串
// 但是要确保这个字符串在项目中全局唯一,否则会有不可预测的行为
return 'Static'
},
data() {
return {}
},
created() {
console.log(`初始化`)
},
methods: {},
}
</script>
运行 npm run dev
后,在缓存时间内,多次刷行页面只会打印一次“初始化”,打印内容如下:
ℹ Waiting for file changes
ℹ Memory usage: 210 MB (RSS: 298 MB)
ℹ Listening on: http://localhost:3000/
初始化
这意味着静态组件缓存生效
# 动态组件实现缓存
<template>
<div>动态组件{{ count }}</div>
</template>
<script>
export default {
name: 'Dynamic',
serverCacheKey(props) {
console.log('serverCacheKey -> props.count', props.count)
return `'Dynamic_'${props.count}`
},
props: {
count: {
type: Number,
default: 0,
},
},
data() {
return {}
},
created() {
console.log(`初始化:${this.count}`)
},
methods: {},
}
</script>
运行 npm run dev
后,在缓存时间内,多次刷行页面只会打印一次初始化的打印,打印内容如下:
ℹ Waiting for file changes
ℹ Memory usage: 210 MB (RSS: 298 MB)
ℹ Listening on: http://localhost:3000/
serverCacheKey -> props.count 1
初始化:1
serverCacheKey -> props.count 2
初始化:2
serverCacheKey -> props.count 3
初始化:3
serverCacheKey -> props.count 4
初始化:4
serverCacheKey -> props.count 5
初始化:5
serverCacheKey -> props.count 6
初始化:6
serverCacheKey -> props.count 7
初始化:7
serverCacheKey -> props.count 8
初始化:8
serverCacheKey -> props.count 9
初始化:9
serverCacheKey -> props.count 10
初始化:10
这意味着动态组件缓存生效