nuxt.js中緩存的示例分析

這篇文章給大家分享的是有關(guān)nuxt.js中緩存的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

nuxt 是基于 vue 的 ssr 解決方案，可以是使用vue語(yǔ)法完成前后端的同構(gòu)。

然而在與傳統(tǒng)純字符串拼接的 ssr 方案相比，性能就沒(méi)那么好了， nuxt 需要在服務(wù)端生成虛擬 dom ，然后再序列化出HTML字符串，我們常說(shuō) nodejs 的高性能指的是異步IO操作頻繁的場(chǎng)景而非CPU操作密集的場(chǎng)景，畢竟 nodejs 是運(yùn)行在單線程下的，在涉及到高并發(fā)的場(chǎng)景下，性能就會(huì)有所下降，可以考慮采用合理的緩存策略

nuxt 的緩存可以分為 組件級(jí)別緩存 , API級(jí)別緩存 以及 頁(yè)面級(jí)別緩存

組件級(jí)別的緩存

配置項(xiàng) nuxt.config.js 的配置大概長(zhǎng)這樣子:

const LRU = require('lru-cache')
module.exports = {
 render: {
  bundleRenderer: {
   cache: LRU({
    max: 1000,           // 最大的緩存?zhèn)€數(shù)
    maxAge: 1000 * 60 * 15    // 緩存15分鐘
   })
  }
 }
}

并不是說(shuō)配了該項(xiàng)就實(shí)現(xiàn)了組件級(jí)別的緩存，還需要在需做緩存的 vue 組件上增加 name 以及 serverCacheKey 字段，以確定緩存的唯一鍵值，比如：

export default {
 name: 'AppHeader',
 props: ['type'],
 serverCacheKey: props => props.type
}

上述組件會(huì)根據(jù)父組件傳下來(lái)的 type 值去做緩存，鍵值是： AppHeader::${props.type} ，由此，新的請(qǐng)求到來(lái)時(shí)，只要父組件傳下來(lái)的 type 屬性之前處理過(guò)，就可以復(fù)用之前的渲染緩存結(jié)果，以增進(jìn)性能

從該例子可以看出，如果該組件除了依賴父組件的 type 屬性，還依賴于別的屬性， serverCacheKey 這里也要做出相應(yīng)的改變，因此，如果組件依賴于很多的全局狀態(tài)，或者，依賴的狀態(tài)取值非常多，意味需要緩存會(huì)被頻繁被設(shè)置而導(dǎo)致溢出，其實(shí)就沒(méi)有多大意義了，在 lru-cache 的配置中，設(shè)置的最大緩存?zhèn)€數(shù)是1000，超出部分就會(huì)被清掉

其次，不應(yīng)該緩存可能對(duì)渲染上下文產(chǎn)生副作用的子組件，比如，組件的 created 與 beforeCreated 的鉤子在服務(wù)端也會(huì)走，組件被緩存后就不會(huì)執(zhí)行了，這些可能影響到渲染上下文的地方也要小心，更多內(nèi)容請(qǐng)參考：組件級(jí)別緩存

一般來(lái)說(shuō)，比較適合的場(chǎng)景是 v-for 大量數(shù)據(jù)的渲染，因?yàn)檠h(huán)操作比較耗cpu

API級(jí)別的緩存

在服務(wù)端渲染的場(chǎng)景中，往往會(huì)將請(qǐng)求放在服務(wù)端去做，渲染完頁(yè)面再返回給瀏覽器，而有些接口是可以去做緩存的，比如，不依賴登錄態(tài)且不依賴過(guò)多參數(shù)的接口或者是單純獲取配置數(shù)據(jù)的接口等，接口的處理也是需要時(shí)間的，對(duì)接口的緩存可以加快每個(gè)請(qǐng)求的處理速度，更快地釋放掉請(qǐng)求，從而增進(jìn)性能

api的請(qǐng)求使用 axios ， axios 即可以在服務(wù)端使用也可是在瀏覽器使用，代碼大概長(zhǎng)這樣子

import axios from 'axios'
import md5 from 'md5'
import LRU from 'lru-cache'

// 給api加3秒緩存
const CACHED = LRU({
 max: 1000,
 maxAge: 1000 * 3
})

function request (config) {
 let key
 // 服務(wù)端才加緩存，瀏覽器端就不管了
 if (config.cache && !process.browser) {
  const { params = {}, data = {} } = config
  key = md5(config.url + JSON.stringify(params) + JSON.stringify(data))
  if (CACHED.has(key)) {
   // 緩存命中
   return Promise.resolve(CACHED.get(key))
  }
 }
 return axios(config)
  .then(rsp => {
   if (config.cache && !process.browser) {
    // 返回結(jié)果前先設(shè)置緩存
    CACHED.set(key, rsp.data)
   }
   return rsp.data
  })
}

使用上跟平時(shí)使用 axios 還是一樣的，就多加了個(gè) cache 的屬性標(biāo)識(shí)是否需要在服務(wù)端做緩存

const api = {
 getGames: params => request({
  url: '/gameInfo/gatGames',
  params,
  cache: true
 })
}

頁(yè)面級(jí)別的緩存

在不依賴于登錄態(tài)以及過(guò)多參數(shù)的情況下，如果并發(fā)量很大，可以考慮使用頁(yè)面級(jí)別的緩存， 在 nuxt.config.js 增加 serverMiddleware 屬性

const nuxtPageCache = require('nuxt-page-cache')

module.exports = {
 serverMiddleware: [
  nuxtPageCache.cacheSeconds(1, req => {
   if (req.query && req.query.pageType) {
    return req.query.pageType
   }
   return false
  })
 ]
}

上面的例子根據(jù)鏈接后面的參數(shù) pageType 去做緩存，如果鏈接后面有 pageType 參數(shù)，就做緩存，緩存時(shí)間為1秒，也就是說(shuō)在1秒內(nèi)相同的 pageType 請(qǐng)求，服務(wù)端只會(huì)執(zhí)行一次完整的渲染

nuxt-page-cache 參考了route-cache ，寫得比較簡(jiǎn)陋，你也可以重新封裝下，nuxt最終返回?cái)?shù)據(jù)是使用 res.end(html, 'utf-8') ，頁(yè)面級(jí)別的緩存大概的思想如下：

const LRU = require('lru-cache')

let cacheStore = new LRU({
 max: 100,     // 設(shè)置最大的緩存?zhèn)€數(shù)
 maxAge: 200
})

module.exports.cacheSeconds = function (secondsTTL, cacheKey) {
 // 設(shè)置緩存的時(shí)間
 const ttl = secondsTTL * 1000
 return function (req, res, next) {
  // 獲取緩存的key值
  let key = req.originalUrl
  if (typeof cacheKey === 'function') {
   key = cacheKey(req, res)
   if (!key) { return next() }
  } else if (typeof cacheKey === 'string') {
   key = cacheKey
  }

  // 如果緩存命中，直接返回
  const value = cacheStore.get(key)
  if (value) {
   return res.end(value, 'utf-8')
  }

  // 緩存原先的end方案
  res.original_end = res.end

  // 重寫res.end方案，由此nuxt調(diào)用res.end實(shí)際上是調(diào)用該方法，
  res.end = function () {
   if (res.statusCode === 200) {
    // 設(shè)置緩存
    cacheStore.set(key, data, ttl)
   }
   // 最終返回結(jié)果
   res.original_end(data, 'utf-8')
  }
 }
}

如果緩存命中，直接將原先的計(jì)算結(jié)果返回，大大提供了性能

感謝各位的閱讀！關(guān)于“nuxt.js中緩存的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！