欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2018年09月18日 08:59:42   作者:光屁股的小破孩  
vue服務(wù)區(qū)緩存分為頁(yè)面緩存、組建緩存和接口緩存,本文通過(guò)實(shí)例代碼逐一給大家介紹,本文重點(diǎn)給大家介紹vue服務(wù)端渲染添加緩存的方法,感興趣的朋友跟隨小編一起看看吧

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

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

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

緩存

雖然 Vue 的服務(wù)器端渲染(SSR)相當(dāng)快速,但是由于創(chuàng)建組件實(shí)例和虛擬 DOM 節(jié)點(diǎn)的開(kāi)銷(xiāo),無(wú)法與純基于字符串拼接(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 秒后過(guò)期。
})
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)境使用本地打包文件來(lái)渲染
 const bundle = require('./output/vue-ssr-bundle.json')
 const template = fs.readFileSync(resolve('./output/index.html'), 'utf-8')
 renderer = createRenderer(bundle, template)
} else {
 // 開(kāi)發(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)該包含足夠的信息,來(lái)表示渲染結(jié)果的具體情況。如果渲染結(jié)果僅由  props.item.id 決定,則上述是一個(gè)很好的實(shí)現(xiàn)。但是,如果具有相同 id 的 item 可能會(huì)隨時(shí)間而變化,或者如果渲染結(jié)果依賴(lài)于其他 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ù)多久過(guò)期
})
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ì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue Element前端應(yīng)用開(kāi)發(fā)之功能點(diǎn)管理及權(quán)限控制

    Vue Element前端應(yīng)用開(kāi)發(fā)之功能點(diǎn)管理及權(quán)限控制

    在一個(gè)業(yè)務(wù)管理系統(tǒng)中,如果我們需要實(shí)現(xiàn)權(quán)限控制功能,我們需要定義好對(duì)應(yīng)的權(quán)限功能點(diǎn),然后在界面中對(duì)界面元素的功能點(diǎn)進(jìn)行綁定,這樣就可以在后臺(tái)動(dòng)態(tài)分配權(quán)限進(jìn)行動(dòng)態(tài)控制了,權(quán)限功能點(diǎn)是針對(duì)角色進(jìn)行控制的,也就是簡(jiǎn)稱(chēng)RBAC(Role Based Access Control)。
    2021-05-05
  • vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問(wèn)題

    vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問(wèn)題

    這篇文章主要介紹了vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue后臺(tái)返回格式為二進(jìn)制流進(jìn)行文件的下載方式

    vue后臺(tái)返回格式為二進(jìn)制流進(jìn)行文件的下載方式

    這篇文章主要介紹了vue后臺(tái)返回格式為二進(jìn)制流進(jìn)行文件的下載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue-mounted中如何處理data數(shù)據(jù)

    vue-mounted中如何處理data數(shù)據(jù)

    這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Ant Design Vue resetFields表單重置不生效問(wèn)題及解決

    Ant Design Vue resetFields表單重置不生效問(wèn)題及解決

    這篇文章主要介紹了Ant Design Vue resetFields 表單重置不生效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-06-06
  • Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù)

    Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù)

    這篇文章主要介紹了Vuejs如何通過(guò)Axios請(qǐng)求數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例

    vue.js移動(dòng)端tab組件的封裝實(shí)踐實(shí)例

    本篇文章主要介紹了vue.js移動(dòng)端tab的封裝實(shí)踐實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷

    koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷

    這篇文章主要介紹了koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-08-08
  • vue中如何給靜態(tài)資源增加路由前綴

    vue中如何給靜態(tài)資源增加路由前綴

    這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • 帶你一文了解Vue生命周期鉤子

    帶你一文了解Vue生命周期鉤子

    生命周期鉤子又被叫做生命周期時(shí)間,生命周期函數(shù),生命周期鉤子就是vue生命周期中出發(fā)的各類(lèi)事件,這些事件被稱(chēng)為生命周期鉤子,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期鉤子的相關(guān)資料,需要的朋友可以參考下
    2022-06-06

最新評(píng)論