Exemple de code pour l'application de cache de rendu côté serveur Vue-js tutoriel-php.cn

Exemple de code pour l'application de cache de rendu côté serveur Vue

不言

Libérer： 2018-09-12 15:23:21

original

1368 Les gens l'ont consulté

Le contenu de cet article concerne l'exemple de code de l'application de cache de rendu du serveur Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le cache Vue est divisé en cache de pages, cache de composants et cache d'interface. Ici, je parle principalement du cache de pages et du cache d'interface.

Cache de pages :

Défini dans server.js.

const LRU = require(&#39;lru-cache&#39;)

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Construire le cache :

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

Copier après la connexion

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

Copier après la connexion

Construire pour mettre en cache

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
}

Copier après la connexion

La clé renvoyée par serverCacheKey doit contenir suffisamment d'informations pour représenter la situation spécifique du résultat du rendu. Ce qui précède est une bonne implémentation si le résultat du rendu est déterminé uniquement par props.item.id . Cependant, si les éléments portant le même identifiant peuvent changer au fil du temps, ou si les résultats du rendu dépendent d'autres accessoires, l'implémentation de serverCacheKey devra être modifiée pour tenir compte d'autres variables. Si serverCacheKey renvoie une constante, le composant sera toujours mis en cache, ce qui est bon pour les composants purement statiques.

Recommandations associées :

Vue+Nuxt.js pour le rendu côté serveur

Comment utiliser Vue+Nuxt. js Implémenter le rendu côté serveur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!