快捷導(dǎo)航

vue服務(wù)端渲染添加緩存的方法

更新時(shí)間：2018年09月18日 08:59:42 作者：光屁股的小破孩

vue服務(wù)區(qū)緩存分為頁(yè)面緩存、組建緩存和接口緩存，本文通過實(shí)例代碼逐一給大家介紹，本文重點(diǎn)給大家介紹vue服務(wù)端渲染添加緩存的方法，感興趣的朋友跟隨小編一起看看吧

什么是服務(wù)器端渲染(SSR)？

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM。然而，也可以將同一個(gè)組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序。

服務(wù)器渲染的 Vue.js 應(yīng)用程序也可以被認(rèn)為是"同構(gòu)"或"通用"，因?yàn)閼?yīng)用程序的大部分代碼都可以在服務(wù)器和客戶端上運(yùn)行。

緩存

雖然 Vue 的服務(wù)器端渲染(SSR)相當(dāng)快速，但是由于創(chuàng)建組件實(shí)例和虛擬 DOM 節(jié)點(diǎn)的開銷，無法與純基于字符串拼接(pure string-based)的模板的性能相當(dāng)。在 SSR 性能至關(guān)重要的情況下，明智地利用緩存策略，可以極大改善響應(yīng)時(shí)間并減少服務(wù)器負(fù)載。

vue服務(wù)區(qū)緩存分為頁(yè)面緩存、組建緩存和接口緩存

頁(yè)面緩存：

在server.js中設(shè)置

const LRU = require('lru-cache')
const microCache = LRU({
 max: 100, // 最大緩存的數(shù)目
 maxAge: 1000 // 重要提示：條目在 1 秒后過期。
})
const isCacheable = req => {
 //判斷是否需要頁(yè)面緩存
　　if (req.url && req.url === '/') {
 　　 return req.url
　　} else {
 　　return false
　　}
}
app.get('*', (req, res) => {
const cacheable = isCacheable(req)
　　if (cacheable) {
　　　　const hit = microCache.get(req.url)
 　　　　if (hit) {
  　　return res.end(hit)
　　}
　}
const errorHandler = err => {
 if (err && err.code === 404) {
  // 未找到頁(yè)面
  res.status(404).sendfile('public/404.html');
 } else {
  // 頁(yè)面渲染錯(cuò)誤
  res.status(500).end('500 - Internal Server Error')
  console.error(`error during render : ${req.url}`)
  console.error(err)
 }
}
const context = {
 title: 'vue',
 keywords: 'vue-ssr服務(wù)端腳手架',
 description: 'vue-ssr-template, vue-server-renderer',
 version: v,
 url: req.url,
 cookies: req.cookies
}
renderer.renderToString(context, (err, html) => {
 if (err) {
  return errorHandler(err)
 }
 res.end(html)
 microCache.set(req.url, html) // 設(shè)置當(dāng)前緩存頁(yè)面的內(nèi)容
})
})

組建緩存：

在server.js中設(shè)置如下：

function createRenderer(bundle, template) {
 return require('vue-server-renderer').createBundleRenderer(bundle, {
  template,
  cache: LRU({
   max: 1000,
   maxAge: 1000 * 60 * 5 // 組建緩存時(shí)間
  })
 })
}
let renderer
if (isProd) {
 // 生產(chǎn)環(huán)境使用本地打包文件來渲染
 const bundle = require('./output/vue-ssr-bundle.json')
 const template = fs.readFileSync(resolve('./output/index.html'), 'utf-8')
 renderer = createRenderer(bundle, template)
} else {
 // 開發(fā)環(huán)境使用webpack熱更新服務(wù)
 require('./build/dev-server')(app, (bundle, template) => {
  renderer = createRenderer(bundle, template)
 })
}

要緩存的組建

export default {
 name: 'Home',
 title() {
  return {
   title: 'vue-ssr',
   keywords: 'vue-ssr服務(wù)端腳手架, home',
   description: 'vue-ssr-template, vue-server-renderer, home'
  }
 },
 created() {
 },
 computed: {},
 asyncData({ store }) {},
 methods: {},
 serverCacheKey: props => props.id
}

serverCacheKey 返回的 key 應(yīng)該包含足夠的信息，來表示渲染結(jié)果的具體情況。如果渲染結(jié)果僅由 props.item.id 決定，則上述是一個(gè)很好的實(shí)現(xiàn)。但是，如果具有相同 id 的 item 可能會(huì)隨時(shí)間而變化，或者如果渲染結(jié)果依賴于其他 prop，則需要修改 serverCacheKey 的實(shí)現(xiàn)，以考慮其他變量。如果 serverCacheKey 返回常量將導(dǎo)致組件始終被緩存，這對(duì)純靜態(tài)組件是有好處的。

接口緩存：

在create-api-server.js中設(shè)置緩存

import qs from 'qs'
import axios from 'axios'
import md5 from 'md5'
import LRU from 'lru-cache'
const microCache = LRU({ 
　　max: 100,
　　maxAge: 5000 // 設(shè)置數(shù)據(jù)多久過期
})
export function createAPI({baseUrl, timeout}) {
let api
if (process.__API__) { api = process.__API__ } else {
// 定義全局變量 process.__API__
  api = process.__API__ = {
   get(url, params = {}) {
    const key = md5(url + JSON.stringify(params))
    // 判斷是否有緩存,直接返回緩存結(jié)果
    if (params.cache && microCache.get(key)) {
     console.log('返回緩存')
     return Promise.resolve(microCache.get(key))
    }
    return new Promise((resolve, reject) => {
     axios({
      url,
      params,
      headers: {
       'X-Requested-With': 'XMLHttpRequest'
       // 'Cookie': parseCookie(SSR.cookies)
      },
      method: 'get'
     }).then(res => {
      // 判斷是否需要緩存 如果需要緩存緩存數(shù)據(jù)
      if (params.cache && microCache) {
       microCache.set(key, res.data)
      }
      console.log('返回新數(shù)據(jù)')
      resolve(res.data)
     }).catch(error => {
      reject(error)
     })
    })
   },
   post(url, params = {}) {
    const key = md5(url + JSON.stringify(params))
    // 判斷是否有緩存,直接返回緩存結(jié)果
    if (params.cache && microCache.get(key)) {
     return Promise.resolve(microCache.get(key))
    }
    return new Promise((resolve, reject) => {
     axios({
      url,
      data: qs.stringify(params),
      method: 'post',
      headers: {
       'X-Requested-With': 'XMLHttpRequest',
       'Content-Type': 'application/x-www-form-urlencoded'
       // 'Cookie': parseCookie(SSR.cookies)
      }
     }).then(res => {
      // 判斷是否需要緩存 如果需要緩存緩存數(shù)據(jù)
      if (params.cache && microCache) {
       microCache.set(key, res.data)
      }
      resolve(res.data)
     }).catch(error => {
      reject(error)
     })
    })
   }
  }
 }
return api
}

總結(jié)

以上所述是小編給大家介紹的vue服務(wù)端渲染添加緩存的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: