nuxt 组件缓存和页面缓存

组件缓存

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

使用

• 使用 yarn 或 npm 将 @nuxtjs/component-cache 依赖项添加到项目中
• 将 @nuxtjs/component-cache 添加到 nuxt.config.js 的modules部分

{
  modules: [
    // 简单的用法
    '@nuxtjs/component-cache',

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

注意：

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

要缓存的组件

export default {
  name: 'item', // required
  props: ['item'],
  serverCacheKey: props => props.item.id,
  render (h) {
    return h('div', this.item.id)
  }
}

---

页面缓存
安装 lru-cache
用到 nuxt.config.js 中的 serverMiddleware

新建服务器端中间件处理缓存文件 pageCache.js

const LRU = require('lru-cache');
export const cachePage = new LRU({
  max: 100, // 缓存队列长度 最大缓存数量
  maxAge: 1000 * 10, // 缓存时间 单位：毫秒
});
export default function(req, res, next) {
  const url = req._parsedOriginalUrl;
  const pathname = url.pathname;
  // 本地开发环境不做页面缓存(也可开启开发环境进行调试)
  if (process.env.NODE_ENV !== 'development') {
    // 只有首页才进行缓存
    if (['/'].indexOf(pathname) > -1) {
      const existsHtml = cachePage.get('indexPage');
      if (existsHtml) {
        //  如果没有Content-Type:text/html 的 header，gtmetrix网站无法做测评
        res.setHeader('Content-Type', ' text/html; charset=utf-8');
        return res.end(existsHtml.html, 'utf-8');
      } else {
        res.original_end = res.end;
        res.end = function(data) {
          if (res.statusCode === 200) {
            // 设置缓存
            cachePage.set('indexPage', {
              html: data,
            });
          }
          res.original_end(data, 'utf-8');
        };
      }
    }
  }
  next();
}

在nuxt.config.js中配置serverMiddleware，引入

/*
   ** 服务器端中间件--针对首页做缓存
   */
  serverMiddleware: [
    {
      path: '/',
      handler: '~/utils/server-middleware/pageCache.js',
    },
  ]

清理缓存
如果需要清理缓存，请在 pageCahe.js 添加：

 // 清理缓存
 if (pathname === '/cleancache') {
  cachePage.reset();
  res.statusCode = 200;
}

并同样添加到 nuxt.config.js中

 {
   path: '/cleancache',
   handler: '~/utils/server-middleware/pageCache.js',
 },

借鉴