Vue服务端渲染实践之Web应用首屏耗时最优化方案

import { createApp } from './app';
export default context => {
 const { app } = createApp();
 return app;
}

在服务端用vue-router分割代码

与

Vue

实例一样，也需要创建单例的

vueRouter

对象。对于每个请求，都需要创建一个新的

vueRouter

实例：

function createVueInstance(routes, ctx) {
  const router = Router({
    base: '/base',
    mode: 'history',
    routes: [routes],
  });
  const store = createStore({ ctx });
  // 把路由注入到vuex中
  sync(store, router);
  const app = new Vue({
    router,
    render: function(h) {
      return h(Frame);
    },
    store,
  });
  return { app, router, store };
}

同时，需要在

entry-server.js

中实现服务器端路由逻辑，使用

router.getMatchedComponents

方法获取到当前路由匹配的组件，如果当前路由没有匹配到相应的组件，则

reject

到

404

页面，否则

resolve

整个

app

，用于

Vue

渲染虚拟

DOM

，并使用对应模板生成对应的

HTML

字符串。

const createApp = require('./app');
module.exports = context => {
 return new Promise((resolve, reject) => {
  // ...
  // 设置服务器端 router 的位置
  router.push(context.url);
  // 等到 router 将可能的异步组件和钩子函数解析完
  router.onReady(() => {
   const matchedComponents = router.getMatchedComponents();
   // 匹配不到的路由，执行 reject 函数，并返回 404
   if (!matchedComponents.length) {
    return reject('匹配不到的路由，执行 reject 函数，并返回 404');
   }
   // Promise 应该 resolve 应用程序实例，以便它可以渲染
   resolve(app);
  }, reject);
 });
}

在服务端预拉取数据

在

Vue

服务端渲染，本质上是在渲染我们应用程序的”快照”，所以如果应用程序依赖于一些异步数据，那么在开始渲染过程之前，需要先预取和解析好这些数据。服务端

Web Server Frame

作为代理服务器，在服务端对接口服务发起请求，并将数据拼装到全局