首页 / js教程

    vue服务端渲染页面缓存和组件缓存的介绍(代码)

    类型:原创      发布者:不言2018-09-15 15:38:48

    本篇文章给大家带来的内容是关于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 返回的 key 应该包含足够的信息,来表示渲染结果的具体情况。如果渲染结果仅由 props.item.id 决定,则上述是一个很好的实现。但是,如果具有相同 id 的 item 可能会随时间而变化,或者如果渲染结果依赖于其他 prop,则需要修改 serverCacheKey 的实现,以考虑其他变量。如果 serverCacheKey返回常量将导致组件始终被缓存,这对纯静态组件是有好处的。

    以上就是vue服务端渲染页面缓存和组件缓存的介绍(代码)的详细内容,更多请关注php中文网其它相关文章!

php中文网赞助会员

PHP中文网

未登录