Beispielcode für die serverseitige Rendering-Cache-Anwendung von Vue-js-Tutorial-php.cn

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

不言

Freigeben： 2018-09-12 15:23:21

Original

1369 Leute haben es durchsucht

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(&#39;lru-cache&#39;)

Nach dem Login kopieren

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>

Nach dem Login kopieren

app.get(&#39;*&#39;, (req, res) => {
const cacheable = isCacheable(req)
　　if (cacheable) {
　　　　const hit = microCache.get(req.url) 　　　　
　　　　if (hit) { 
　　　　   　　return res.end(hit)　　
　　　　   　　}　
      }

Nach dem Login kopieren

const errorHandler = err => {
  if (err && err.code === 404) {
    // 未找到页面
    res.status(404).sendfile(&#39;public/404.html&#39;);
  } else {
    // 页面渲染错误
    res.status(500).end(&#39;500 - Internal Server Error&#39;)
    console.error(`error during render : ${req.url}`)
    console.error(err)
  }
}

Nach dem Login kopieren

const context = {
  title: &#39;vue&#39;,
  keywords: &#39;vue-ssr服务端脚手架&#39;,
  description: &#39;vue-ssr-template, vue-server-renderer&#39;,
  version: v,
  url: req.url,
  cookies: req.cookies
}

Nach dem Login kopieren

renderer.renderToString(context, (err, html) => {
  if (err) {
    return errorHandler(err)
  }
  res.end(html)
  microCache.set(req.url, html)
})
})

Nach dem Login kopieren

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

Nach dem Login kopieren

Komponenten-Cache:

function createRenderer(bundle, template) {
return require(&#39;vue-server-renderer&#39;).createBundleRenderer(bundle, {
template,
cache: LRU({
max: 1000,
maxAge: 1000 * 60 * 5 // 组建缓存时间
})
})
}

Nach dem Login kopieren

let renderer
if (isProd) {
  // 生产环境使用本地打包文件来渲染
  const bundle = require(&#39;./output/vue-ssr-bundle.json&#39;)
  const template = fs.readFileSync(resolve(&#39;./output/index.html&#39;), &#39;utf-8&#39;)
  renderer = createRenderer(bundle, template)
} else {
  // 开发环境使用webpack热更新服务
  require(&#39;./build/dev-server&#39;)(app, (bundle, template) => {
    renderer = createRenderer(bundle, template)
  })
}

Nach dem Login kopieren

Zu zwischenzuspeichernde Komponente

export default {
name: &#39;Home&#39;,
title() {
return {
title: &#39;vue-ssr&#39;,
keywords: &#39;vue-ssr服务端脚手架, home&#39;,
description: &#39;vue-ssr-template, vue-server-renderer, home&#39;
 }
 },
created() {
 },
computed: {},
asyncData({ store }) {},
methods: {},
serverCacheKey: props => props.id
}

Nach dem Login kopieren

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!