构建同构渲染

构建流程

786a415a-5fee-11e6-9c11-45a2cfdf085c.png

源码结构

我们需要使用 webpack 来打包我们的 Vue 应用程序。事实上，我们可能需要在服务器上使用 webpack 打包 Vue 应用程序，因为：

  • 通常 Vue 应用程序是由 webpack 和 vue-loader 构建，并且许多 webpack 特定功能不能直接在 Node.js 中运行（例如通过 file-loader 导入文件，通过 css-loader 导入 CSS）。
  • 尽管 Node.js 最新版本能够完全支持 ES2015 特性，我们还是需要转译客户端代码以适应老版浏览器。这也会涉及到构建步骤。

所以基本看法是，对于客户端应用程序和服务器应用程序，我们都要使用 webpack 打包 - 服务器需要「服务器 bundle」然后用于服务器端渲染(SSR)，而「客户端 bundle」会发送给浏览器，用于混合静态标记。

现在我们正在使用 webpack 来处理服务器和客户端的应用程序，大部分源码可以使用通用方式编写，可以使用 webpack 支持的所有功能。同时，在编写通用代码时，有一些事项要牢记在心。

一个基本项目可能像是这样：

  1. src
  2. ├── components
  3. │   ├── Foo.vue
  4. │   ├── Bar.vue
  5. │   └── Baz.vue
  6. ├── App.vue
  7. ├── app.js # 通用 entry(universal entry)
  8. ├── entry-client.js # 仅运行于浏览器
  9. └── entry-server.js # 仅运行于服务器

App.vue

  1. <template>
  2.   <!-- 客户端渲染的入口节点 -->
  3.   <div id="app">
  4.     <h1>拉勾教育</h1>
  5.   </div>
  6. </template>
  8. <script>
  9. export default {
  10.   name: 'App'
  11. }
  12. </script>
  14. <style>
  16. </style>

app.js

app.js 是我们应用程序的「通用 entry」。在纯客户端应用程序中，我们将在此文件中创建根 Vue 实例，并直接挂载到 DOM。但是，对于服务器端渲染(SSR)，责任转移到纯客户端 entry 文件。app.js 简单地使用 export 导出一个 createApp 函数：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  4. // 导出一个工厂函数，用于创建新的
  5. // 应用程序、router 和 store 实例
  6. export function createApp () {
  7.   const app = new Vue({
  8.     // 根实例简单的渲染应用程序组件。
  9.     render: h => h(App)
  10.   })
  11.   return { app }
  12. }

entry-client.js

客户端 entry 只需创建应用程序，并且将其挂载到 DOM 中：

  1. import { createApp } from './app'
  3. // 客户端特定引导逻辑……
  5. const { app } = createApp()
  7. // 这里假定 App.vue 模板中根元素具有 `id="app"`
  8. app.$mount('#app')

entry-server.js

服务器 entry 使用 default export 导出函数，并在每次渲染中重复调用此函数。此时，除了创建和返回应用程序实例之外，它不会做太多事情 - 但是稍后我们将在此执行服务器端路由匹配 (server-side route matching) 和数据预取逻辑 (data pre-fetching logic)。

  1. import { createApp } from './app'
  3. export default context => {
  4.   const { app } = createApp()
  5.   return app
  6. }

server.js

  1. /**
  2.  * 通用应用 Web 服务启动脚本
  3.  */
  5. const express = require('express')
  6. const Vue = require('vue')
  7. const VueServerRenderer = require('vue-server-renderer')
  8. const fs = require('fs')
  10. // 创建一个 express 实例
  11. const server = express()
  13. // 生成一个渲染器
  14. const renderer = VueServerRenderer.createRenderer({
  15.   // 渲染器就会自动把渲染的结果注入到模板中
  16.   template: fs.readFileSync('./index.html', 'utf-8')
  17. })
  19. const createApp = () => {
  20.   const app = new Vue({
  21.     template: `
  22.       <div id="app">
  23.         <h1>Hello {{ message }}</h1>
  24.         <input v-model="message">
  25.       </div>
  26.     `,
  27.     data: {
  28.       message: 'World'
  29.     }
  30.   })
  31.   return app
  32. }
  34. server.get('/foo', (req, res) => {
  35.   const app = createApp()
  36.   app.message = '世界'
  37.   res.end('foo')
  38. })
  40. // 设置一个路由
  41. server.get('/', async (req, res) => {
  42.   // const app = new Vue({
  43.   //   template: `
  44.   //     <div id="app">
  45.   //       <h1>Hello {{ message }}</h1>
  46.   //       <input v-model="message">
  47.   //     </div>
  48.   //   `,
  49.   //   data: {
  50.   //     message: 'World'
  51.   //   }
  52.   // })
  54.   try {
  55.     const app = createApp()
  56.     const ret = await renderer.renderToString(app, {
  57.       title: '自定义页面标题',
  58.       meta: `
  59.         <meta name="description" content="hello world">
  60.       `
  61.     })
  62.     res.end(ret)
  63.   } catch (err) {
  64.     res.status(500).end('Internal Server Error.')
  65.   }
  66. })
  68. // 监听端口，启动 Web 服务
  69. server.listen(3000, () => {
  70.   console.log('running at port 3000.')
  71. })

index.template.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>拉勾教育</title>
  7. </head>
  8. <body>
  9.   <!-- 服务端渲染的内容出口 -->
  10.   <!--vue-ssr-outlet-->
  11. </body>
  12. </html>

构建配置

安装依赖

（1）安装生产依赖

  1. npm i vue vue-server-renderer express cross-env
包 说明
vue Vue.js 核心库
vue-server-renderer Vue 服务端渲染工具
express 基于 Node 的 Web 服务框架
cross-env 通过 npm scripts 设置跨平台环境变量

（2）安装开发依赖

  1. npm i -D webpack webpack-cli webpack-merge webpack-node-externals @babel/core @babel/plugin-transform-runtime @babel/preset-env babel-loader css-loader url-loader file-loader rimraf vue-loader vue-template-compiler friendly-errors-webpack-plugin
包 说明
webpack webpack 核心包
webpack-cli webpack 的命令行工具
webpack-merge webpack 配置信息合并工具
webpack-node-externals 排除 webpack 中的 Node 模块
rimraf 基于 Node 封装的一个跨平台 rm -rf
工具
friendly-errors-webpack-plugin 友好的 webpack 错误提示
@babel/core
@babel/plugin-transform-runtime
@babel/preset-env
babel-loader		 Babel 相关工具
vue-loader
vue-template-compiler		 处理 .vue 资源
file-loader 处理字体资源
css-loader 处理 CSS 资源
url-loader 处理图片资源

配置文件及打包命令

（1）初始化 webpack 打包配置文件

  1. build
  2. ├── webpack.base.config.js # 公共配置
  3. ├── webpack.client.config.js # 客户端打包配置文件
  4. └── webpack.server.config.js # 服务端打包配置文件

webpack.base.config.js

  1. /**
  2.  * 公共配置
  3.  */
  4. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  5. const path = require('path')
  6. const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
  7. const resolve = file => path.resolve(__dirname, file)
  9. const isProd = process.env.NODE_ENV === 'production'
  11. module.exports = {
  12.   mode: isProd ? 'production' : 'development',
  13.   output: {
  14.     path: resolve('../dist/'),
  16.     // 注意：publicPath 是 Web 路径，不是文件路径。Web 路径必须以 / 开头
  17.     publicPath: '/dist/',
  18.     filename: '[name].[chunkhash].js'
  19.   },
  20.   resolve: {
  21.     alias: {
  22.       // 路径别名，@ 指向 src
  23.       '@': resolve('../src/')
  24.     },
  25.     // 可以省略的扩展名
  26.     // 当省略扩展名的时候，按照从前往后的顺序依次解析
  27.     extensions: ['.js', '.vue', '.json']
  28.   },
  29.   devtool: isProd ? 'source-map' : 'cheap-module-eval-source-map',
  30.   module: {
  31.     rules: [
  32.       // 处理图片资源
  33.       {
  34.         test: /\.(png|jpg|gif)$/i,
  35.         use: [
  36.           {
  37.             loader: 'url-loader',
  38.             options: {
  39.               limit: 8192,
  40.             },
  41.           },
  42.         ],
  43.       },
  45.       // 处理字体资源
  46.       {
  47.         test: /\.(woff|woff2|eot|ttf|otf)$/,
  48.         use: [
  49.           'file-loader',
  50.         ],
  51.       },
  53.       // 处理 .vue 资源
  54.       {
  55.         test: /\.vue$/,
  56.         loader: 'vue-loader'
  57.       },
  59.       // 处理 CSS 资源
  60.       // 它会应用到普通的 `.css` 文件
  61.       // 以及 `.vue` 文件中的 `<style>` 块
  62.       {
  63.         test: /\.css$/,
  64.         use: [
  65.           'vue-style-loader',
  66.           'css-loader'
  67.         ]
  68.       },
  70.       // CSS 预处理器，参考：https://vue-loader.vuejs.org/zh/guide/pre-processors.html
  71.       // 例如处理 Less 资源
  72.       // {
  73.       //   test: /\.less$/,
  74.       //   use: [
  75.       //     'vue-style-loader',
  76.       //     'css-loader',
  77.       //     'less-loader'
  78.       //   ]
  79.       // },
  80.     ]
  81.   },
  82.   plugins: [
  83.     new VueLoaderPlugin(),
  84.     new FriendlyErrorsWebpackPlugin()
  85.   ]
  86. }

webpack.client.config.js

  1. /**
  2.  * 客户端打包配置
  3.  */
  4. const { merge } = require('webpack-merge')
  5. const baseConfig = require('./webpack.base.config.js')
  6. const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
  8. module.exports = merge(baseConfig, {
  9.   entry: {
  10.     app: './src/entry-client.js'
  11.   },
  13.   module: {
  14.     rules: [
  15.       // ES6 转 ES5
  16.       {
  17.         test: /\.m?js$/,
  18.         exclude: /(node_modules|bower_components)/,
  19.         use: {
  20.           loader: 'babel-loader',
  21.           options: {
  22.             presets: ['@babel/preset-env'],
  23.             cacheDirectory: true,
  24.             plugins: ['@babel/plugin-transform-runtime']
  25.           }
  26.         }
  27.       },
  28.     ]
  29.   },
  31.   // 重要信息：这将 webpack 运行时分离到一个引导 chunk 中，
  32.   // 以便可以在之后正确注入异步 chunk。
  33.   optimization: {
  34.     splitChunks: {
  35.       name: "manifest",
  36.       minChunks: Infinity
  37.     }
  38.   },
  40.   plugins: [
  41.     // 此插件在输出目录中生成 `vue-ssr-client-manifest.json`。
  42.     new VueSSRClientPlugin()
  43.   ]
  44. })

webpack.server.config.js

  1. /**
  2.  * 服务端打包配置
  3.  */
  4. const { merge } = require('webpack-merge')
  5. const nodeExternals = require('webpack-node-externals')
  6. const baseConfig = require('./webpack.base.config.js')
  7. const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
  9. module.exports = merge(baseConfig, {
  10.   // 将 entry 指向应用程序的 server entry 文件
  11.   entry: './src/entry-server.js',
  13.   // 这允许 webpack 以 Node 适用方式处理模块加载
  14.   // 并且还会在编译 Vue 组件时，
  15.   // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
  16.   target: 'node',
  18.   output: {
  19.     filename: 'server-bundle.js',
  20.     // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
  21.     libraryTarget: 'commonjs2'
  22.   },
  24.   // 不打包 node_modules 第三方包，而是保留 require 方式直接加载
  25.   externals: [nodeExternals({
  26.     // 白名单中的资源依然正常打包
  27.     allowlist: [/\.css$/]
  28.   })],
  30.   plugins: [
  31.     // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
  32.     // 默认文件名为 `vue-ssr-server-bundle.json`
  33.     new VueSSRServerPlugin()
  34.   ]
  35. })

（2）在 npm scripts 中配置打包命令

  1. "scripts": {
  2.   "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js",
  3.   "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js",
  4.   "build": "rimraf dist && npm run build:client && npm run build:server"
  5. },

运行测试：

  1. npm run build:client
  3. npm run build:server
  5. npm run build

启动应用

  1. const Vue = require('vue')
  2. const express = require('express')
  3. const fs = require('fs')
  5. const serverBundle = require('./dist/vue-ssr-server-bundle.json')
  6. const template = fs.readFileSync('./index.template.html', 'utf-8')
  7. const clientManifest = require('./dist/vue-ssr-client-manifest.json')
  9. // 
  10. const renderer = require('vue-server-renderer').createBundleRenderer(serverBundle, {
  11.   template,
  12.   clientManifest
  13. })
  15. const server = express()
  17. server.use('/dist', express.static('./dist'))
  19. server.get('/', (req, res) => {
  20.   renderer.renderToString({
  21.     title: '拉勾教育',
  22.     meta: `
  23.       <meta name="description" content="拉勾教育">
  24.     `
  25.   }, (err, html) => {
  26.     if (err) {
  27.       return res.status(500).end('Internal Server Error.')
  28.     }
  29.     res.setHeader('Content-Type', 'text/html; charset=utf8')
  30.     res.end(html)
  31.   })
  32. })
  34. server.listen(3000, () => {
  35.   console.log('server running at port 3000.')
  36. })

解析渲染流程

（1）服务端渲染

  • renderer.renderToString 渲染了什么？
  • renderer 是如何拿到 entry-server 模块的？
    • createBundleRenderer 中的 serverBundle
  • server Bundle 是 Vue SSR 构建的一个特殊的 JSON 文件
    • entry：入口
    • files：所有构建结果资源列表
    • maps：源代码 source map 信息
  • server-bundle.js 就是通过 server.entry.js 构建出来的结果文件
  • 最终把渲染结果注入到模板中

（2）客户端渲染

  • vue-ssr-client-manifest.json
    • publicPath：访问静态资源的根相对路径，与 webpack 配置中的 publicPath 一致
    • all：打包后的所有静态资源文件路径
    • initial：页面初始化时需要加载的文件，会在页面加载时配置到 preload 中
    • async：页面跳转时需要加载的文件，会在页面加载时配置到 prefetch 中
    • modules：项目的各个模块包含的文件的序号，对应 all 中文件的顺序；moduleIdentifier和和all数组中文件的映射关系（modules对象是我们查找文件引用的重要数据）

构建开发模式

我们现在已经实现同构应用的基本功能了，但是这对于一个完整的应用来说还远远不够，例如如何处理同构应用中的路由、如何在服务端渲染中进行数据预取等功能。这些功能我们都会去对它进行实现，但是在实现它们之前我们要先来解决一个关于打包的问题：

  • 每次写完代码，都要重新打包构建
  • 重新启动 Web 服务
  • 很麻烦…

所以下面我们来实现项目中的开发模式构建，也就是我们希望能够实现：

  • 写完代码，自动构建
  • 自动重启 Web 服务
  • 自动刷新页面内容
  • …

基本思路

  • 生产模式
    • npm run build 构建
    • node server.js 启动应用
  • 开发模式
    • 监视代码变动自动构建，热更新等功能
    • node server.js 启动应用

所以我们设计了这样的启动脚本：

  1. "scripts": {
  2.   ...
  4.   // 启动开发服务
  5.   "dev": "node server.js",
  7.   // 启动生产服务
  8.   "start": "cross-env NODE_ENV=production && node server.js"
  9. }

服务端配置：

  1. /**
  2.  * 服务端入口，仅运行于服务端
  3.  */
  4. const express = require('express')
  5. const path = require('path')
  6. const fs = require('fs')
  7. const { createBundleRenderer } = require('vue-server-renderer')
  9. const isProd = process.env.NODE_ENV === 'production'
  10. const templatePath = './index.html'
  12. let renderer
  14. // 生产模式，直接基于已构建好的包创建渲染器
  15. if (isProd) {
  16.   const template = fs.readFileSync(templatePath, 'utf-8')
  17.   const serverBundle = require('./dist/vue-ssr-server-bundle.json')
  18.   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
  19.   renderer = createBundleRenderer(serverBundle, {
  20.     runInNewContext: false, // 推荐
  21.     template, // （可选）页面模板
  22.     clientManifest // （可选）客户端构建 manifest
  23.   })
  24. } else {
  25.   // 开发模式
  26.   // 打包构建（客户端 + 服务端） -> 创建渲染器
  27. }
  29. const server = express()
  31. server.use(express.static(path.resolve(__dirname, './dist/')))
  33. async function render (req, res) {
  34.   const context = { url: req.url }
  36.   // 这里无需传入一个应用程序，因为在执行 bundle 时已经自动创建过。
  37.   // 现在我们的服务器与应用程序已经解耦！
  38.   // bundle renderer 在调用 renderToString 时，
  39.   // 它将自动执行「由 bundle 创建的应用程序实例」所导出的函数（传入上下文作为参数），然后渲染它。
  40.   try {
  41.     const html = await renderer.renderToString(context)
  42.     res.send(html)
  43.   } catch (err) {
  44.     res.status(500).end(err.message)
  45.   }
  46. }
  48. server.get('*', isProd
  49.   ? render // 生产模式：使用构建好的包直接渲染
  50.   : (req, res) => {
  51.     // 开发模式：等编译构建好再渲染
  52.   })
  54. server.listen(8080, () => console.log('running 8080'))

封装处理模块

build/setup-dev-server.js

  1. module.exports = function (app, templatePath, cb) {
  2.   let ready
  3.   const onReady = new Promise(r => ready = r)
  5.   let serverBundle
  6.   let clientManifest
  7.   let template
  9.   const update = () => {
  10.     if (serverBundle && clientManifest) {
  11.       // 构建完毕，通知 server 可以 render 渲染了
  12.       ready()
  14.       // 更新 server 中的 Renderer
  15.       cb(serverBundle, {
  16.         template,
  17.         clientManifest
  18.       })
  19.     }
  20.   }
  22.   // 监视构建 template，调用 update 更新 Renderer
  24.   // 监视构建 serverBundle，调用 update 更新 Renderer
  26.   // 监视构建 clientManifest，调用 update 更新 Renderer
  28.   return onReady
  29. }

server.js

  1. /**
  2.  * 服务端入口，仅运行于服务端
  3.  */
  4. const express = require('express')
  5. const path = require('path')
  6. const fs = require('fs')
  7. const { createBundleRenderer } = require('vue-server-renderer')
  9. const isProd = process.env.NODE_ENV === 'production'
  10. const templatePath = './index.html'
  12. const app = express()
  14. let renderer
  15. let onReady
  16. // 生产模式，直接基于已构建好的包创建渲染器
  17. if (isProd) {
  18.   const template = fs.readFileSync(templatePath, 'utf-8')
  19.   const serverBundle = require('./dist/vue-ssr-server-bundle.json')
  20.   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
  21.   renderer = createBundleRenderer(serverBundle, {
  22.     runInNewContext: false, // 推荐
  23.     template, // （可选）页面模板
  24.     clientManifest // （可选）客户端构建 manifest
  25.   })
  26. } else {
  27.   // 开发模式
  28.   // 打包构建（客户端 + 服务端）
  29.   // ↓
  30.   // 创建渲染器
  31.   //    模板 + 客户端 bundle + 服务端 bundle
  32.   //    改变 -> 从新生成渲染器
  33.   //    源码改变 -> 打包客户端 Bundle + 服务端 Bundle
  34.   // onReady 是一个 Promise,当它完成的时候意味着初始构建已完成
  35.   onReady = require('./build/setup-dev-server')(
  36.     app,
  37.     templatePath,
  38.     (serverBundle, options) => {
  39.       // 该回调函数是重复调用的
  40.       // 每当生成新的 template、客户端 bundle、服务端 bundle 都会重新生成新的渲染器
  41.       renderer = createBundleRenderer(serverBundle, {
  42.         runInNewContext: false, // 推荐
  43.         ...options
  44.       })
  45.     }
  46.   )
  47. }
  49. app.use(express.static(path.resolve(__dirname, './dist/')))
  51. async function render (req, res) {
  52.   const context = { url: req.url }
  54.   // 这里无需传入一个应用程序，因为在执行 bundle 时已经自动创建过。
  55.   // 现在我们的服务器与应用程序已经解耦！
  56.   // bundle renderer 在调用 renderToString 时，
  57.   // 它将自动执行「由 bundle 创建的应用程序实例」所导出的函数（传入上下文作为参数），然后渲染它。
  58.   try {
  59.     const html = await renderer.renderToString(context)
  60.     res.send(html)
  61.   } catch (err) {
  62.     res.status(500).end(err.message)
  63.   }
  64. }
  66. app.get('*', isProd
  67.   ? render // 生产模式：使用构建好的包直接渲染
  68.   : async (req, res) => {
  69.     // 开发模式：等第一次构建好再渲染
  70.     await onReady
  71.     render(req, res)
  72.   })
  74. app.listen(8080, () => console.log('running 8080'))

更新模板

关于 Node 中的监视的问题：

  • fs.watch
  • fs.watchFile
  • 第三方包：chokidar
  1. // 监视构建 template，调用 update 更新 Renderer
  2. template = fs.readFileSync(templatePath, 'utf-8')
  3. chokidar.watch(templatePath).on('change', () => {
  4.   template = fs.readFileSync(templatePath, 'utf-8')
  5.   console.log('template updated.')
  6.   update()
  7. })

注意：使用 chokidar 监视文件变化在 vscode 中有问题，不影响整体功能。

更新服务端打包

  1. // 监视服务端打包构建
  2. const serverConfig = require('./webpack.server.config')
  3. const serverCompiler = webpack(serverConfig)
  4. serverCompiler.watch({
  5.   // 监视打包的可选配置参数
  6. }, (err, stats) => {
  7.   // console.log('err => ', err)
  8.   // console.log('stats => ', stats)
  9.   if (err) throw err
  10.   if (stats.hasErrors()) return
  12.   // read bundle generated by vue-ssr-webpack-plugin
  13.   serverBundle = JSON.parse(fs.readFileSync('./dist/vue-ssr-server-bundle.json', 'utf-8'))
  15.   // 更新 Renderer
  16.   update()
  17. })

将打包结果存储到内存中

webpack 默认会把构建结果存储到磁盘中，对于生产模式构建来说是没有问题的；但是我们在开发模式中会频繁的修改代码触发构建，也就意味着要频繁的操作磁盘数据，而磁盘数据操作相对于来说是比较慢的，所以我们有一种更好的方式，就是把数据存储到内存中，这样可以极大的提高构建的速度。

memfs 是一个兼容 Node 中 fs 模块 API 的内存文件系统，通过它我们可以轻松的实现把 webpack 构建结果输出到内存中进行管理。

方案一：自己配置 memfs。

  1. const { createFsFromVolume, Volume } = require('memfs')
  3. // 自定义 webpack 把数据写入内存中
  4. serverCompiler.outputFileSystem = createFsFromVolume(new Volume())
  5. // memfs 模块去除了 join 方法，所以这里我们需要手动的给它提供 join 方法
  6. serverCompiler.outputFileSystem.join = path.join.bind(path)
  7. serverCompiler.watch({
  8.   // 监视构建的配置选项
  9. }, (err, stats) => {
  10.   // 每当构建成功，就会执行该回调函数
  11.   if (err) {
  12.     throw err
  13.   }
  15.   if (stats.hasErrors()) {
  16.     return
  17.   }
  19.   // 读取打包之后的最新结果
  20.   serverBundle = JSON.parse(serverCompiler.outputFileSystem.readFileSync(resolve('../dist/vue-ssr-server-bundle.json'), 'utf-8'))
  22.   // update 更新
  23.   update()
  24. })

方案二：使用 webpack-dev-middleware。

webpack-dev-middleware 作用是，以监听模式启动 webpack，将编译结果输出到内存中，然后将内存文件输出到 Express 服务中。

安装依赖：

  1. npm i -D webpack-dev-middleware

配置到构建流程中：

  1. // 监视构建 serverBundle -> 调用 update -> 更新 Renderer 渲染器
  2. const serverConfig = require('./webpack.server.config')
  3. const serverCompiler = webpack(serverConfig)
  4. webpackDevMiddleware(serverCompiler, {
  5.   logLevel: 'silent'
  6. })
  7. serverCompiler.hooks.done.tap('server', () => {
  8.   serverBundle = JSON.parse(
  9.     serverCompiler.outputFileSystem.readFileSync(resolve('../dist/vue-ssr-server-bundle.json'), 'utf-8')
  10.   )
  11.   // console.log(serverBundle)
  12.   update()
  13. })

更新客户端打包

  1. // 监视构建 serverBundle -> 调用 update -> 更新 Renderer 渲染器
  2. const clientConfig = require('./webpack.client.config')
  3. const clientCompiler = webpack(clientConfig)
  4. clientDevMiddleware = webpackDevMiddleware(clientCompiler, {
  5.   publicPath: clientConfig.output.publicPath, // 重要！输出资源的访问路径前缀，应该和客户端打包输出的 publicPath 一致
  6.   logLevel: 'silent'
  7. })
  8. clientCompiler.hooks.done.tap('client', () => {
  9.   clientManifest = JSON.parse(
  10.     clientCompiler.outputFileSystem.readFileSync(resolve('../dist/vue-ssr-client-manifest.json'), 'utf-8')
  11.   )
  12.   update()
  13. })
  15. // 重要！将内存中的资源通过 Express 中间件对外公开访问
  16. server.use(clientDevMiddleware)

热更新

热更新功能需要使用到 webpack-hot-middleware 工具包。

安装依赖：

  1. npm install --save-dev webpack-hot-middleware
  1. const hotMiddleware = require('webpack-hot-middleware')
  3. // 监视构建 serverBundle -> 调用 update -> 更新 Renderer 渲染器
  4. const clientConfig = require('./webpack.client.config')
  6. // ====================== 热更新配置 ============================
  7. clientConfig.plugins.push(new webpack.HotModuleReplacementPlugin())
  8. clientConfig.entry.app = [
  9.   'webpack-hot-middleware/client?reload=true&noInfo=true',
  10.   clientConfig.entry.app
  11. ]
  12. clientConfig.output.filename = '[name].js'
  13. // ======================== /热更新配置 ==========================
  15. const clientCompiler = webpack(clientConfig)
  16. clientDevMiddleware = webpackDevMiddleware(clientCompiler, {
  17.   publicPath: clientConfig.output.publicPath,
  18.   logLevel: 'silent'
  19. })
  20. clientCompiler.hooks.done.tap('client', () => {
  21.   clientManifest = JSON.parse(
  22.     clientCompiler.outputFileSystem.readFileSync(resolve('../dist/vue-ssr-client-manifest.json'), 'utf-8')
  23.   )
  24.   update()
  25. })
  26. server.use(clientDevMiddleware)
  28. // 挂载热更新的中间件
  29. server.use(hotMiddleware(clientCompiler, {
  30.   log: false
  31. }))

工作原理：

  • 中间件将自身安装为 webpack 插件，并侦听编译器事件。
  • 每个连接的客户端都有一个 Server Sent Events 连接，服务器将在编译器事件上向连接的客户端发布通知。
  • 当客户端收到消息时，它将检查本地代码是否为最新。如果不是最新版本，它将触发 webpack 热模块重新加载。

路由和代码分割

接下来我们来了解一下如何处理通用应用中的路由。

官方文档给出的解决方案肯定还是使用 vue-router，整体使用方式和纯客户端的使用方式基本一致，只需要在少许的位置做一些配置就可以了。文档中已经把配置的方式描述的很清楚了，建议大家认真看一下文档，下面我把具体的实现来演示一下。

router/index.js

  1. /**
  2.  * 路由模块
  3.  */
  4. import Vue from 'vue'
  5. import VueRouter from 'vue-router'
  6. import Home from '@/pages/Home'
  8. Vue.use(VueRouter)
  10. export function createRouter () {
  11.   const router = new VueRouter({
  12.     mode: 'history', // 同构应用不能使用 hash 路由，应该使用 history 模式
  13.     routes: [
  14.       {
  15.         path: '/',
  16.         name: 'home',
  17.         component: Home
  18.       },
  19.       {
  20.         path: '/about',
  21.         name: 'about',
  22.         component: () => import('@/pages/About')
  23.       },
  24.       {
  25.         path: '*',
  26.         name: '404',
  27.         component: () => import('@/pages/404')
  28.       }
  29.     ]
  30.   })
  32.   return router
  33. }

app.js

  1. /**
  2.  * 通用启动入口
  3.  */
  4. import Vue from 'vue'
  5. import App from './App.vue'
  6. import { createRouter } from './router'
  8. // 导出一个工厂函数，用于创建新的
  9. // 应用程序、router 和 store 实例
  10. export function createApp () {
  11.   const router = createRouter()
  12.   const app = new Vue({
  13.     router, // 将 router 挂载到根实例
  14.     // 根实例简单的渲染应用程序组件。
  15.     render: h => h(App)
  16.   })
  17.   return { app, router }
  18. }

entry-server.js

  1. /**
  2.  * 服务端启动入口
  3.  */
  4. import { createApp } from './app'
  6. export default async context => {
  7.   const { app, router } = createApp()
  9.   // set server-side router's location
  10.   router.push(context.url)
  12.   // wait until router has resolved possible async components and hooks
  13.   await new Promise(router.onReady.bind(router))
  14.   // const matchedComponents = router.getMatchedComponents()
  16.   return app
  17. }

server.js

  1. const render = async (req, res) => {
  2.   const context = {
  3.     url: req.url,
  4.     meta: '',
  5.     title: '拉勾教育'
  6.   }
  8.   try {
  9.     const html = await renderer.renderToString(context)
  10.     res.end(html)
  11.   } catch (err) {
  12.     res.status(500).end('Internal Server Error')
  13.   }
  14. }
  16. server.get('*', isProd
  17.   ? render
  18.   : async (req, res) => {
  19.     // 等待有了 Renderer 渲染器以后，调用 render 进行渲染
  20.     await onReady
  21.     render(req, res)
  22.   }
  23. )

entry-client.js

  1. /**
  2.  * 客户端入口
  3.  */
  4. import { createApp } from './app'
  6. // 客户端特定引导逻辑……
  8. const { app, router } = createApp()
  10. router.onReady(() => {
  11.   app.$mount('#app')
  12. })

App.vue

最后要在 App.vue 根组件中来设置路由的出口，因为没有路由出口的话，匹配到的路由组件就不知道要渲染到哪里。

  1. <template>
  2.   <div id="app">
  3.     <ul>
  4.       <li>
  5.         <router-link to="/">Home</router-link>
  6.       </li>
  7.       <li>
  8.         <router-link to="/about">About</router-link>
  9.       </li>
  10.     </ul>
  12.     <!-- 路由出口 -->
  13.     <router-view/>
  14.   </div>
  15. </template>
  17. <script>
  18. export default {
  19.   name: 'App'
  20. }
  21. </script>
  23. <style>
  25. </style>

配置好出口以后，启动应用：

  1. npm run dev

启动成功，访问页面。

测试路由导航，可以看到正常工作，那说明我们同构应用中的路由产生作用了。

现在我们的应用就非常的厉害了，当你首次访问页面的时候，它是通过服务端渲染出来的，服务端渲染拥有了更快的渲染速度以及更好的 SEO，当服务端渲染的内容来到客户端以后被客户端 Vue 结合 Vue Router 激活，摇身一变成为了一个客户端 SPA 应用，之后的页面导航也不需要重新刷新整个页面。这样我们的网站就既拥有了更好的渲染速度，也拥有了更好的用户体验。

除此之外，我们在路由中配置的异步组件（也叫路由懒加载）也是非常有意义，它们会被分割为独立的 chunk（也就是单独的文件），只有在需要的时候才会进行加载。这样就能够避免在初始渲染的时候客户端加载的脚本过大导致激活速度变慢的问题。关于它也可以来验证一下，通过 npm run build 打包构建，我们发现它们确实被分割成了独立的 chunk。然后再来看一下在运行期间这些 chunk 文件是如何加载的。

你会发现除了 app 主资源外，其它的资源也被下载下来了，你是不是要想说：不是应该在需要的时候才加载吗？为什么一上来就加载了。

原因是在页面的头部中的带有 preload 和 prefetch 的 link 标签。

我们期望客户端 JavaScript 脚本尽快加载尽早的接管服务端渲染的内容，让其拥有动态交互能力，但是如果你把 script 标签放到这里的话，浏览器会去下载它，然后执行里面的代码，这个过程会阻塞页面的渲染。

所以看到真正的 script 标签是在页面的底部的。而这里只是告诉浏览器可以去预加载这个资源。但是不要执行里面的代码，也不要影响网页的正常渲染。直到遇到真正的 script 标签加载该资源的时候才会去执行里面的代码，这个时候可能已经预加载好了，直接使用就可以了，如果没有加载好，也不会造成重复加载，所以不用担心这个问题。

而 prefetch 资源是加载下一个页面可能用到的资源，浏览器会在空闲的时候对其进行加载，所以它并不一定会把资源加载出来，而 preload 一定会预加载。所以你可以看到当我们去访问 about 页面的时候，它的资源是通过 prefetch 预取过来的，提高了客户端页面导航的响应速度。

好了，关于同构应用中路由的处理，以及代码分割功能就介绍到这里。

数据预取和状态

接下来我们来了解一下服务端渲染中的数据预取和状态管理。

官方文档中的描述比较枯燥，无法在很短的时间内搞清楚它到底要做什么，所以我们这里通过一个实际的业务需求来引入这个话题。

我们的需求就是：

  • 已知有一个数据接口，接口返回一个文章列表数据
  • 我们想要通过服务端渲染的方式来把异步接口数据渲染到页面中

这个需求看起来是不是很简单呢？无非就是在页面发请求拿数据，然后在模板中遍历出来，如果是纯客户端渲染的话确实就是这样的，但是想要通过服务端渲染的方式来处理的话就比较麻烦了。

无论如何，我们都要来尝试一下：

构建同构渲染 - 图2

也就是说我们要在服务端获取异步接口数据，交给 Vue 组件去渲染。

我们首先想到的肯定是在组件的生命周期钩子中请求获取数据渲染页面，那我们可以顺着这个思路来试一下。

在组件中添加生命周期钩子，beforeCreate 和 created，服务端渲染仅支持这两个钩子函数的调用。

然后下一个问题是如何在服务端发送请求？依然使用 axios，axios 既可以运行在客户端也可以运行在服务端，因为它对不同的环境做了适配处理，在客户端是基于浏览器的 XMLHttpRequest 请求对象，在服务端是基于 Node.js 中的 http 模块实现，无论是底层是什么，上层的使用方式都是一样的。

  1. // 服务端渲染
  2. //     只支持 beforeCreate 和 created
  3. //     不会等待 beforeCreate 和 created 中的异步操作
  4. //     不支持响应式数据
  5. // async created () {
  6. //   const { data } = await axios({
  7. //     method: 'GET',
  8. //     url: 'https://cnodejs.org/api/v1/topics'
  9. //   })
  10. //   this.posts = data.data
  11. // }

接下来我们就按照官方文档给出的参考来把服务端渲染中的数据预取以及状态管理来处理一下。

通过官方文档我们可以看到，它的核心思路就是把在服务端渲染期间获取的数据存储到 Vuex 容器中，然后把容器中的数据同步到客户端，这样就保持了前后端渲染的数据状态同步，避免了客户端重新渲染的问题。

所以接下来要做的第一件事儿就是把 Vuex 容器创建出来。

（1）通过 Vuex 创建容器实例，并挂载到 Vue 根实例

安装 Vuex：

  1. npm i vuex

创建 Vuex 容器：

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import axios from 'axios'
  5. Vue.use(Vuex)
  7. export const createStore = () => {
  8.   return new Vuex.Store({
  9.     state: {
  10.       posts: [] // 文章列表
  11.     },
  13.     mutations: {
  14.       // 修改容器状态
  15.       setPosts (state, data) {
  16.         state.posts = data
  17.       }
  18.     },
  20.     actions: {
  21.       async getPosts ({ commit }) {
  22.         const { data } = await axios({
  23.           method: 'GET',
  24.           url: 'https://cnodejs.org/api/v1/topics'
  25.         })
  26.         commit('setPosts', data.data)
  27.       }
  28.     }
  29.   })
  30. }

在通用应用入口中将 Vuex 容器挂载到 Vue 根实例：

  1. /**
  2.  * 通用启动入口
  3.  */
  4. import Vue from 'vue'
  5. import App from './App.vue'
  6. import { createRouter } from './router/'
  7. import VueMeta from 'vue-meta'
  8. import { createStore } from './store'
  10. Vue.use(VueMeta)
  12. Vue.mixin({
  13.   metaInfo: {
  14.     titleTemplate: '%s - 拉勾教育'
  15.   }
  16. })
  18. // 导出一个工厂函数，用于创建新的
  19. // 应用程序、router 和 store 实例
  20. export function createApp () {
  21.   const router = createRouter()
  22.   const store = createStore()
  23.   const app = new Vue({
  24.     router, // 把路由挂载到 Vue 根实例中
  25.     store, // 把容器挂载到 Vue 根实例
  26.     // 根实例简单的渲染应用程序组件。
  27.     render: h => h(App)
  28.   })
  29.   return { app, router, store }
  30. }

（2）在组件中使用 serverPrefetch 触发容器中的 action

  1. <template>
  2.   <div>
  3.     <h1>Post List</h1>
  4.     <ul>
  5.       <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  6.     </ul>
  7.   </div>
  8. </template>
  10. <script>
  11. // import axios from 'axios'
  12. import { mapState, mapActions } from 'vuex'
  14. export default {
  15.   name: 'PostList',
  16.   metaInfo: {
  17.     title: 'Posts'
  18.   },
  19.   data () {
  20.     return {
  21.       // posts: []
  22.     }
  23.   },
  24.   computed: {
  25.     ...mapState(['posts'])
  26.   },
  27.   serverPrefetch () {
  28.     return this.getPosts()
  29.   },
  30.   // 服务端渲染
  31.   //     只支持 beforeCreate 和 created
  32.   //     不会等待 beforeCreate 和 created 中的异步操作
  33.   //     不支持响应式数据
  34.   // 所有这种做法在服务端渲染中是不会工作的！！！
  35.   // async created () {
  36.   //   console.log('Posts Created Start')
  37.   //   const { data } = await axios({
  38.   //     method: 'GET',
  39.   //     url: 'https://cnodejs.org/api/v1/topics'
  40.   //   })
  41.   //   this.posts = data.data
  42.   //   console.log('Posts Created End')
  43.   // },
  44.   methods: {
  45.     ...mapActions(['getPosts'])
  46.   }
  47. }
  48. </script>
  50. <style>
  52. </style>

（3）在服务端渲染应用入口中将容器状态序列化到页面中

接下来我们要做的就是把在服务端渲染期间所获取填充到容器中的数据同步到客户端容器中，从而避免两个端状态不一致导致客户端重新渲染的问题。

  • 将容器中的 state 转为 JSON 格式字符串
  • 生成代码：window.__INITIAL__STATE = 容器状态 语句插入模板页面中
  • 【客户端通过 window.__INITIAL__STATE 获取该数据】
  1. router.onReady...
  3. context.rendered = () => {
  4.   // 在应用渲染完成以后，服务端 Vuex 容器中已经填充了状态数据
  5.   // 这里手动的把容器中的状态数据放到 context 上下文中
  6.   // Renderer 在渲染页面模板的时候会把 state 序列化为字符串串内联到页面中
  7.   // window.__INITIAL_STATE__ = store.state
  8.   context.state = store.state
  9. }

（4）最后，在客户端渲染入口中把服务端传递过来的状态数据填充到客户端 Vuex 容器中：

  1. /**
  2.  * 客户端入口
  3.  */
  4. import { createApp } from './app'
  6. // 客户端特定引导逻辑……
  8. const { app, router, store } = createApp()
  10. // 如果当前页面中有 __INITIAL_STATE__ 数据，则直接将其填充到客户端容器中
  11. if (window.__INITIAL_STATE__) {
  12.   // We initialize the store state with the data injected from the server
  13.   store.replaceState(window.__INITIAL_STATE__)
  14. }
  16. router.onReady(() => {
  17.   app.$mount('#app')
  18. })

客户端更新问题：

  1. {
  2.   mounted () {
  3.     if (!this.posts.length) {
  4.       this.$store.dispatch('getPosts')
  5.     }
  6.   },
  7.     beforeRouteLeave (to, from, next) {
  8.       this.$store.commit('setPosts', [])
  9.       next()
  10.     }
  11. }