嗨前端

# 组件缓存

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

这意味着动态组件缓存生效

← 页面缓存 →