vue服务端渲染添加缓存

虽然 Vue 的服务器端渲染(SSR)相当快速，但是由于创建组件实例和虚拟 DOM 节点的开销，无法与纯基于字符串拼接(pure string-based)的模板的性能相当。在 SSR 性能至关重要的情况下，明智地利用缓存策略，可以极大改善响应时间并减少服务器负载。

 

vue服务区缓存分为页面缓存、组建缓存和接口缓存

 

页面缓存：

 

　　在server.js中设置

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

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中设置如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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)   }) }

　要缓存的组建

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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'

1	const microCache = LRU({ <br>　　max: 100,<br>　　maxAge: 5000 // 设置数据多久过期<br>})

export function createAPI({baseUrl, timeout}) {
let api

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

if (process.__API__) { api = process.__API__ } else {<br>// 定义全局变量 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)           })         })       }     }   }<br>return api<br>}

　　

这样就ok了

 

所有的问题都是我在日常生活中用到的，可能会有不正确或者不是最佳解决方案，希望留下你的建议和意见，共同学习，共同进步

博主地址  http://www.cnblogs.com/wing-sky/p/9664320.html