vue服務端渲染新增快取
快取
雖然 Vue 的伺服器端渲染(SSR)相當快速,但是由於建立元件例項和虛擬 DOM 節點的開銷,無法與純基於字串拼接(pure string-based)的模板的效能相當。在 SSR 效能至關重要的情況下,明智地利用快取策略,可以極大改善響應時間並減少伺服器負載。
vue服務區快取分為頁面快取、組建快取和介面快取
頁面快取 :
在server.js中設定
const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大快取的數目 maxAge: 1000 // 重要提示:條目在 1 秒後過期。 }) const isCacheable = req => { //判斷是否需要頁面快取 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) { // 未找到頁面 res.status(404).sendfile('public/404.html'); } else { // 頁面渲染錯誤 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服務端腳手架', 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) // 設定當前快取頁面的內容 }) })
組建快取 :
在server.js中設定如下:
function createRenderer(bundle, template) { return require('vue-server-renderer').createBundleRenderer(bundle, { template, cache: LRU({ max: 1000, maxAge: 1000 * 60 * 5 // 組建快取時間 }) }) } let renderer if (isProd) { // 生產環境使用本地打包檔案來渲染 const bundle = require('./output/vue-ssr-bundle.json') const template = fs.readFileSync(resolve('./output/index.html'), 'utf-8') renderer = createRenderer(bundle, template) } else { // 開發環境使用webpack熱更新服務 require('./build/dev-server')(app, (bundle, template) => { renderer = createRenderer(bundle, template) }) }
要快取的組建
export default { name: 'Home', title() { return { title: 'vue-ssr', keywords: 'vue-ssr服務端腳手架, home', description: 'vue-ssr-template, vue-server-renderer, home' } }, created() { }, computed: {}, asyncData({ store }) {}, methods: {}, serverCacheKey: props => props.id }
serverCacheKey
返回的 key 應該包含足夠的資訊,來表示渲染結果的具體情況。如果渲染結果僅由 props.item.id
決定,則上述是一個很好的實現。但是,如果具有相同 id 的 item 可能會隨時間而變化,或者如果渲染結果依賴於其他 prop,則需要修改 serverCacheKey
的實現,以考慮其他變數。如果 serverCacheKey
返回常量將導致元件始終被快取,這對純靜態元件是有好處的。
介面快取:
在create-api-server.js中設定快取
import qs from 'qs' import axios from 'axios' import md5 from 'md5' import LRU from 'lru-cache'
const microCache = LRU({ max: 100, maxAge: 5000 // 設定資料多久過期 })
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)) // 判斷是否有快取,直接返回快取結果 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 => { // 判斷是否需要快取 如果需要快取快取資料 if (params.cache && microCache) { microCache.set(key, res.data) } console.log('返回新資料') resolve(res.data) }).catch(error => { reject(error) }) }) }, post(url, params = {}) { const key = md5(url + JSON.stringify(params)) // 判斷是否有快取,直接返回快取結果 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 => { // 判斷是否需要快取 如果需要快取快取資料 if (params.cache && microCache) { microCache.set(key, res.data) } resolve(res.data) }).catch(error => { reject(error) }) }) } } } return api }
這樣就ok了