Einführung in das serverseitige Rendering von Vue-Seiten-Caching und Komponenten-Caching (Code)

Dieser Artikel bietet Ihnen eine Einführung (Code) zum serverseitigen Rendering von Seiten-Caching und Komponenten-Caching. Ich hoffe, dass er für Sie hilfreich ist.

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

Seiten-Cache:

im Server. Legen Sie

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

in js fest, um den Cache zu erstellen:

Legen Sie es in server.js wie folgt fest:

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

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

von serverCacheKey zurückgegebener Schlüssel Sollte genügend Informationen enthalten, um die Besonderheiten des Rendering-Ergebnisses darzustellen. Das Obige ist eine gute Implementierung, wenn das Rendering-Ergebnis nur durch props.item.id bestimmt wird. Wenn Sie jedoch das gleiche haben Die Element-ID kann sich im Laufe der Zeit ändern oder wenn das Rendering-Ergebnis von anderen Faktoren abhängt prop müssen Sie die Implementierung von serverCacheKey ändern, 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.

Das obige ist der detaillierte Inhalt vonEinführung in das serverseitige Rendering von Vue-Seiten-Caching und Komponenten-Caching (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!