尽管 Vue 的 SSR 速度相当快，但由于创建组件实例和虚拟 DOM 节点的成本，它无法与纯基于字符串的模板的性能相匹配。在 SSR 性能至关重要的情况下，明智地利用缓存策略可以极大地缩短响应时间并减少服务器负载。

缓存能够更快的将内容发送给客户端，提升 web 应用程序的性能，同时减少服务器的负载。

页面缓存

如官方文档中介绍的那样，对特定的页面合理的应用 micro-caching 能够大大改善服务器处理并发的能力(吞吐率 RPS)。

但并非所有页面都适合应用 micro-caching 缓存策略，我们可以将资源分为三类：

  • 静态资源：如 js、css、images 等。
  • 用户特定的动态资源：不同的用户访问相同的资源会得到不同的内容。
  • 用户无关的动态资源：任何用户访问该资源都会得到相同的内容，但该内容可能在任意时间发生变化，如博客文章。

只有“用户无关的动态资源”适合应用 micro-caching 缓存策略。

安装依赖：

  1. npm i lru-cache

server.js

  1. const express = require('express')
  2. const fs = require('fs')
  3. const { createBundleRenderer } = require('vue-server-renderer')
  4. const setupDevServer = require('./build/setup-dev-server')
  5. const LRU = require('lru-cache')
  7. const cache = new LRU({
  8.   max: 100,
  9.   maxAge: 10000 // Important: entries expires after 1 second.
  10. })
  12. const isCacheable = req => {
  13.   console.log(req.url)
  14.   if (req.url === '/posts') {
  15.     return true
  16.   }
  17. }
  19. const server = express()
  21. server.use('/dist', express.static('./dist'))
  23. const isProd = process.env.NODE_ENV === 'production'
  25. let renderer
  26. let onReady
  27. if (isProd) {
  28.   const serverBundle = require('./dist/vue-ssr-server-bundle.json')
  29.   const template = fs.readFileSync('./index.template.html', 'utf-8')
  30.   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
  31.   renderer = createBundleRenderer(serverBundle, {
  32.     template,
  33.     clientManifest
  34.   })
  35. } else {
  36.   // 开发模式 -> 监视打包构建 -> 重新生成 Renderer 渲染器
  37.   onReady = setupDevServer(server, (serverBundle, template, clientManifest) => {
  38.     renderer = createBundleRenderer(serverBundle, {
  39.       template,
  40.       clientManifest
  41.     })
  42.   })
  43. }
  45. const render = async (req, res) => {
  46.   try {
  47.     const cacheable = isCacheable(req)
  48.     if (cacheable) {
  49.       const html = cache.get(req.url)
  50.       if (html) {
  51.         return res.end(html)
  52.       }
  53.     }
  55.     const html = await renderer.renderToString({
  56.       title: '拉勾教育',
  57.       meta: `
  58.         <meta name="description" content="拉勾教育">
  59.       `,
  60.       url: req.url
  61.     })
  63.     res.setHeader('Content-Type', 'text/html; charset=utf8')
  64.     res.end(html)
  66.     if (cacheable) {
  67.       cache.set(req.url, html)
  68.     }
  69.   } catch (err) {
  70.     res.status(500).end('Internal Server Error.')
  71.   }
  72. }
  74. // 服务端路由设置为 *，意味着所有的路由都会进入这里
  75. server.get('*', isProd
  76.   ? render
  77.   : async (req, res) => {
  78.     // 等待有了 Renderer 渲染器以后，调用 render 进行渲染
  79.     await onReady
  80.     render(req, res)
  81.   }
  82. )
  84. server.listen(3000, () => {
  85.   console.log('server running at port 3000.')
  86. })

Gzip 压缩

注意事项：

  • 默认的过滤器功能使用 compressible 模块来确定 res.getHeader（’Content-Type’）是否可压缩。

组件级别缓存

参考链接