如何使用Vue组件中的 cache?

虽然Vue的SSR非常快,但由于创建组件实例和Virtual DOM节点的成本,它无法与纯粹基于字符串的模板的性能相匹配。在SSR性能至关重要的情况下,合理地利用缓存策略可以大大缩短响应时间并减少服务器负载。

请使用Nuxt.js的Component Cache module模块。此模块使用vue-server-renderer为Vue组件添加LRU缓存支持。

使用

  • 使用 yarn 或 npm 将 @nuxtjs/component-cache 依赖项添加到项目中
  • @nuxtjs/component-cache 添加到 nuxt.config.jsmodules部分
{
  modules: [
    // 简单的用法
    '@nuxtjs/component-cache',

    // 配置选项
    ['@nuxtjs/component-cache', {
      max: 10000,
      maxAge: 1000 * 60 * 60
    }],
  ]
}

有关更多信息,请参阅component-level caching

提醒

  • 可缓存组件必须定义唯一 name 选项
  • 不应该缓存组件的情况
    • 拥有可能依赖于全球状态的子组件。
    • 具有在渲染context中产生副作用的子组件。

如何提交问题或文档贡献? 在 GitHub 编辑此页面!