Maison > interface Web > js tutoriel > Introduction à la mise en cache des pages de rendu côté serveur Vue et à la mise en cache des composants (code)

Introduction à la mise en cache des pages de rendu côté serveur Vue et à la mise en cache des composants (code)

不言
Libérer: 2018-09-15 15:38:48
original
2276 Les gens l'ont consulté

Cet article vous apporte une introduction (code) sur la mise en cache des pages de rendu côté serveur vue et la mise en cache des composants. 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 de composants

Cache de pages :

dans le. serveur. Définissez

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) // 设置当前缓存页面的内容
})
})
Copier après la connexion

dans js pour créer le cache :

Définissez-le dans server.js comme suit :

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)
  })
}
Copier après la connexion

Le composant à mettre en cache

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
}
Copier après la connexion

clé renvoyée par serverCacheKey Doit contenir suffisamment d'informations pour représenter les spécificités 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 vous avez le même L'identifiant de l'élément peut changer avec le temps ou si le résultat du rendu dépend d'autres prop, vous devez modifier l'implémentation de serverCacheKey pour prendre en 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.

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!

Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal