Vue 서버 측 렌더링 페이지 캐싱 및 구성 요소 캐싱(코드) 소개

이 글은 vue 서버측 렌더링 페이지 캐싱과 컴포넌트 캐싱에 대한 소개(코드)를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

vue 캐시는 페이지 캐시, 컴포넌트 캐시, 인터페이스 캐시로 나누어집니다. 여기서는 주로 페이지 캐시와 컴포넌트 캐시에 대해 이야기합니다

페이지 캐시: #🎜🎜 #

server.js에 설정

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

빌드 캐시:

다음과 같이 server.js에 설정:

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

캐시할 구성 요소

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
}

serverCacheKey 반환된 키 렌더링 결과의 구체적인 내용을 나타내기에 충분한 정보를 포함해야 합니다. 위의 내용은 렌더링 결과가 props.item.id에 의해서만 결정되는 경우 좋은 구현입니다. 하지만, 같은 것이 있다면 항목 ID는 시간이 지남에 따라 변경되거나 렌더링 결과가 다른 항목에 따라 달라질 수 있습니다. prop의 경우 다른 변수를 고려하려면 serverCacheKey 구현을 수정해야 합니다. serverCacheKey가 상수를 반환하면 구성 요소가 항상 캐시되므로 순수 정적 구성 요소에 좋습니다.

위 내용은 Vue 서버 측 렌더링 페이지 캐싱 및 구성 요소 캐싱(코드) 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!