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

当编写纯客户端 (client-only) 代码时，我们习惯于每次在新的上下文中对代码进行取值。但是，Node.js 服务器是一个长期运行的进程。当我们的代码进入该进程时，它将进行一次取值并留存在内存中。这意味着如果创建一个单例对象，它将在每个传入的请求之间共享。如基本示例所示，我们为每个请求创建一个新的根 Vue 实例。这与每个用户在自己的浏览器中使用新应用程序的实例类似。如果我们在多个请求之间使用一个共享的实例，很容易导致交叉请求状态污染 (cross-request state pollution)。因此，我们不应该直接创建一个应用程序实例，而是应该暴露一个可以重复执行的工厂函数，为每个请求创建新的应用程序实例。同样的规则也适用于 router、store 和 event bus 实例。你不应该直接从模块导出并将其导入到应用程序中，而是需要在 createApp 中创建一个新的实例，并从根 Vue 实例注入。

如上代码所述，createApp方法通过返回一个返回值创建Vue实例的对象的函数调用，在函数createVueInstance中，为每一个请求创建了Vue，Vue Router，Vuex实例。并暴露给entry-client和entry-server模块。

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

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

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

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 };  
} 

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!