Vue SSR服務端渲染之資料快取

當我們在做vue的伺服器端渲染時，可能會碰到各種各樣的坑，記憶體洩露就是其中的一種。當然，導致記憶體洩露的原因有很多，不合理使用Axios也是其中一種，那下面我給大家介紹一下如何有效的避免請求中的記憶體洩露。

1. 安裝快取依賴: lru-cache

npm install lru-cache --dev

2. api 配置檔案

config-server.js

var LRU = require('lru-cache')

let api
if (process.__API__) {
    api = process.__API__
} else {
    api = process.__API__ = {
        api: 'http://localhost:8181/api/',
        //配置快取
        cached: LRU({
            max: 1000,
            maxAge: 1000 * 60 * 15
        }),
        cachedItem: {}
    }
}

module.exports = api

3. 封裝下 api

import axios from 'axios'
import qs from 'qs'
import md5 from 'md5'
import config from './config-server.js'

export default {
    post(url, data) {
        const key = md5(url + JSON.stringify(data))
        if (config.cached && config.cached.has(key)) {
            return Promise.resolve(config.cached.get(key))
        }
        return axios({
            method: 'post',
            url: config.api + url,
            data: qs.stringify(data),
            // 其他配置
        }).then(res => {
            if (config.cached && data.cache) config.cached.set(key, res)
            return res
        })
    }
}

ajax 庫我們用axios, 因為axios在 nodejs 和 瀏覽器都可以使用，並且將 node 端和瀏覽器端分開封裝

import config from './config-server.js'

const key = md5(url + JSON.stringify(data))

通過 url 和引數, 生成一個唯一的 key

if (config.cached && config.cached.has(key)) {
    return Promise.resolve(config.cached.get(key))
}

if (config.cached && data.cache) config.cached.set(key, res)

判斷下是不是開啟了快取, 並且介面指定快取的話, 將 api 返回的資料, 寫入快取

注意：這個 api 會處理所有的請求, 但是很多請求其實是不需要快取的, 所以需要快取可以在傳過來的 data 裡, 新增個 cache: true, 如:

api.post('/api/test', {a: 1, b:2, cache: true})

不需要快取的直接按正常傳值即可