> 웹 프론트엔드 > JS 튜토리얼 > Vue 서버 측 렌더링 캐시 애플리케이션의 샘플 코드

Vue 서버 측 렌더링 캐시 애플리케이션의 샘플 코드

不言
풀어 주다: 2018-09-12 15:23:21
원래의
1368명이 탐색했습니다.

이 글의 내용은 Vue 서버 측 렌더링 캐시 애플리케이션의 샘플 코드에 관한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

Vue 캐시는 페이지 캐시, 어셈블리 캐시, 인터페이스 캐시로 나누어집니다.

페이지 캐시:

server.js에서 설정

const LRU = require('lru-cache')
로그인 후 복사
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>
로그인 후 복사
app.get(&#39;*&#39;, (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(&#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)
  }
}
로그인 후 복사
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
}
로그인 후 복사
renderer.renderToString(context, (err, html) => {
  if (err) {
    return errorHandler(err)
  }
  res.end(html)
  microCache.set(req.url, html)
})
})
로그인 후 복사

어셈블리 캐시:

<em id="__mceDel">
</em>
로그인 후 복사
function createRenderer(bundle, template) {
return require(&#39;vue-server-renderer&#39;).createBundleRenderer(bundle, {
template,
cache: LRU({
max: 1000,
maxAge: 1000 * 60 * 5 // 组建缓存时间
})
})
}
로그인 후 복사

캐시됨

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)
  })
}
로그인 후 복사

serverCacheKey를 빌드하여 반환된 키에는 렌더링 결과의 특정 상황을 나타내는 데 충분한 정보가 포함되어야 합니다. 위의 내용은 렌더링 결과가 props.item.id에 의해서만 결정되는 경우 좋은 구현입니다. 그러나 동일한 ID를 가진 항목이 시간이 지남에 따라 변경되거나 렌더링 결과가 다른 props에 따라 달라지는 경우 다른 변수를 고려하여 serverCacheKey 구현을 수정해야 합니다. serverCacheKey가 상수를 반환하면 구성 요소가 항상 캐시되므로 순수하게 정적 구성 요소에 적합합니다.

관련 권장 사항:

서버 측 렌더링을 위한 Vue+Nuxt.js

Vue+Nuxt.js를 사용하여 서버 측 렌더링을 구현하는 방법

위 내용은 Vue 서버 측 렌더링 캐시 애플리케이션의 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿