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)限控制
在一個(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)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
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ù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
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ù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
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)判斷,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-08-08

