Nuxt中如何做页面html缓存 |
您所在的位置：网站首页 › 前端如何做缓存视频 › Nuxt中如何做页面html缓存 |
Nuxt中如何做页面html缓存
|
Nuxt是一款基于Vue的服务端渲染SSR框架 在Nuxt框架的API中，有一个叫 serverMiddleware 的服务端中间件，我们可以利用它在返回首屏html前做一些缓存的处理 在这之前我们需要了解一个叫LRU的算法，LRU是一种缓存淘汰算法，用链表存储数据，最新插入的数据会排在链表头部，已缓存的数据收到访问也会被移到链表的头部，链表有长度限制，满了的时候排在尾部的数组将被丢弃。 想详细了解这个算法的可以看：juejin.cn/post/684490… 关于前端缓存，大家可以看看：juejin.cn/post/684490… 进入正题，实现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缓存 接着我们来自定义一个serverMiddleware import LRU from 'lru-cache'; import etag from 'etag'; const cacheStore = new LRU({ max: 10000, // 设置最大的缓存个数 maxAge: 5 * 60 * 1000 // 5分钟 }); export default function(req, res, next) { const isDev = process.env.NODE_ENV === 'development' // 开发环境为了方便开发，就不走缓存 if (isDev) { return next() } // 此次我们只针对html做缓存 if (req.headers.accept && (req.headers.accept.indexOf('text/html') === -1 && req.headers.accept.indexOf('application/xhtml+xml') === -1 && req.headers.accept.indexOf('application/xml') === -1) ) { return next() } // 用页面url的pathname作为LRU缓存的key值 let key = req._parsedOriginalUrl.pathname // 获取LRU中的缓存 const { etag: curEtag, value } = cacheStore.get(key) || {} if (value) { // 如果命中缓存,则看是否命中协商缓存，是则直接返回304，不是则返回200和数据 if (curEtag === req.hedaers['if-none-match']) { res.writeHead(304) return res.end() } else { res.writeHead(200, { 'Content-Type': 'text/html;', 'Cache-Control': 'private, max-age=60', 'Etag': curEtag }) } } else { // 如果缓存没命中，则返回请求的内容 // 缓存原先的res.end res.original_end = res.end // 重写res.end方法，nuxt服务器响应时会调用res.end res.end = function(data) { if (res.statusCode === 200) { // 将该页面请求html内容存进LRU // 第三个参数缓存时间传undefined则走起初cacheStore定义时的5分钟 cacheStore.set(key, { etag: etag(data), value: data }, undefined) } // html设置客户端强缓存60s res.setHeader('Cache-Control', 'private, max-age=60') // 最终返回请求的内容 return res.original_end(data, 'utf-8') } retun next() } }然后我们在nuxt.config.js内配上这个中间件就可以了 serverMiddleware: [ '~/../pageCache']看起来好像OK了 ちょっと待って 我们页面url不可避免会有参数，而且参数可能会影响页面的内容，如果我们只是用页面url的pathname做缓存的key的话，会导致不同参数的url访问到的内容都命中了同一个缓存，那该怎么办呢？很简单，我们用 pathname+query 作为缓存的key就可以了 import { parse, stringify } from 'querystring'; let key = req._parsedOriginalUrl.pathname; //是否是需要缓存的x页面 if(req._parsedOriginalUrl.pathname.toLowerCase().indexOf('/x') >= 0){ const query = parse(req._parsedUrl.query) const queryStr = stringify({ ...query }) key = key + '?' + queryStr; }大功告成！ |
【本文地址】
今日新闻 |
推荐新闻 |