createBundleRenderer

createBundleRenderer 是 Vue.js 服务端渲染（SSR）的一个高级功能，它由 vue-server-renderer 包提供。这个功能主要用于处理和渲染由 webpack 打包的 Vue 应用代码。使用 createBundleRenderer 可以提高渲染性能，同时简化服务端渲染的数据处理和组件缓存策略。

工作原理

createBundleRenderer 允许你直接渲染 Vue 应用的服务器端打包文件（通常是通过 webpack 和 vue-server-renderer/server-plugin 插件生成的 bundle 文件）。这个打包文件描述了整个 Vue 应用的结构和依赖关系，使得 Vue 服务器端渲染器可以更高效地解析和渲染应用。

关键特性

• 源码映射支持：提供了对 JavaScript 源码映射（Source Map）的支持，有助于在服务端渲染过程中的调试。
• 自动代码分割：在打包过程中，webpack 会根据需要将应用代码分割成多个 chunk，createBundleRenderer 能够处理这些异步加载的 chunk。
• 内置组件缓存：提供了组件级别的缓存策略，以提高渲染性能。
• 流式渲染支持：支持将渲染结果以流的形式发送到客户端，进一步提高内容到达时间（Time to First Byte，TTFB）。

使用 createBundleRenderer

在使用 createBundleRenderer 之前，你需要使用 webpack 和 vue-server-renderer/server-plugin 插件对 Vue 应用进行服务器端打包。这会生成一个 .json 文件，其中包含了应用的 bundle 信息。

const { createBundleRenderer } = require('vue-server-renderer')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推荐
  // template, // 可选的 HTML 模板
  // clientManifest // 客户端构建 manifest
})

// 在服务器处理请求时
server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
      return
    }
    res.end(html)
  })
})