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

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) // 设置当前缓存页面的内容
})
})

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

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
}

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!