• 如何使用Vue组件中的 cache？
    • 使用
    • 提醒

    如何使用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.js 的modules部分
    1. {
    2.   modules: [
    3.     // 简单的用法
    4.     '@nuxtjs/component-cache',
    6.     // 配置选项
    7.     ['@nuxtjs/component-cache', {
    8.       max: 10000,
    9.       maxAge: 1000 * 60 * 60
    10.     }],
    11.   ]
    12. }

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

    提醒

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