Beispielcode für die serverseitige Rendering-Cache-Anwendung von Vue

Der Inhalt dieses Artikels befasst sich mit dem Beispielcode der Vue-Server-Rendering-Cache-Anwendung. Ich hoffe, dass er für Freunde hilfreich ist.

Der Vue-Cache ist in Seiten-Cache, Komponenten-Cache und Schnittstellen-Cache unterteilt. Hier spreche ich hauptsächlich über Seiten-Cache und Schnittstellen-Cache.

Seiten-Cache:

Wird in server.js festgelegt

const LRU = require('lru-cache')

const microCache = LRU({
  max: 100, // 最大缓存的数目
  maxAge: 1000 // 重要提示：条目在 1 秒后过期。
})
 
const isCacheable = req => {
  //判断是否需要页面缓存<br>　　if (req.url 
&& req.url === &#39;/&#39;) {<br> 　　 return req.url<br>　　} 
else {<br><em id="__mceDel"><em id="__mceDel"> 
　　return false<br></em></em><em 
id="__mceDel"><em id="__mceDel"><em id="__mceDel"><em 
id="__mceDel"><em 
id="__mceDel">　　}<br></em></em></em></em></em><em
 id="__mceDel">}</em>

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

<em id="__mceDel">
</em>

Komponenten-Cache:

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

Zu zwischenzuspeichernde Komponente

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 Der zurückgegebene Schlüssel sollte genügend Informationen enthalten, um die spezifische Situation des Rendering-Ergebnisses darzustellen. Das Obige ist eine gute Implementierung, wenn das Rendering-Ergebnis nur durch props.item.id bestimmt wird. Wenn sich jedoch Elemente mit derselben ID im Laufe der Zeit ändern können oder wenn die Rendering-Ergebnisse von anderen Requisiten abhängen, muss die Implementierung von serverCacheKey geändert werden, um andere Variablen zu berücksichtigen. Wenn serverCacheKey eine Konstante zurückgibt, wird die Komponente immer zwischengespeichert, was für rein statische Komponenten von Vorteil ist.

Verwandte Empfehlungen:

Vue+Nuxt.js für serverseitiges Rendering

So verwenden Sie Vue+Nuxt. js Implementieren Sie serverseitiges Rendering

Das obige ist der detaillierte Inhalt vonBeispielcode für die serverseitige Rendering-Cache-Anwendung von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!