html前端如何缓存页面,Nuxt中如何做页面html缓存

Nuxt是一款基于Vue的服务端渲染SSR框架

在Nuxt框架的API中，有一个叫 serverMiddleware 的服务端中间件，我们可以利用它在返回首屏html前做一些缓存的处理

在这之前我们需要了解一个叫LRU的算法，LRU是一种缓存淘汰算法，用链表存储数据，最新插入的数据会排在链表头部，已缓存的数据收到访问也会被移到链表的头部，链表有长度限制，满了的时候排在尾部的数组将被丢弃。

进入正题，实现html缓存我们需要两个包，一个是lru-cache，一个是etag

(lru-cache是别人封装好的一个lru存储类，etag是用来为实体内容产生一个strong etag)

建一个pageCache.js，引入这两个包

import LRU from 'lru-cache';

import etag from 'etag';

const cacheStore = new LRU({

max: 10000, // 设置最大的缓存个数

maxAge: 5 * 60 * 1000 // 5分钟

});

复制代码

我们可以根据需要调整max和maxAge，来控制LRU缓存