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

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

src  
├── components  
│   ├── Foo.vue  
│   ├── Bar.vue  
│   └── Baz.vue  
├── frame  
│   ├── app.js # 通用 entry(universal entry)  
│   ├── entry-client.js # 仅运行于浏览器  
│   ├── entry-server.js # 仅运行于服务器  
│   └── index.vue # 项目入口组件  
├── pages  
├── routers  
└── store 

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

import Router from '~ut/router';  
import { sync } from 'vuex-router-sync';  
import Vue from 'vue';  
import { createStore } from './../store';  
import Frame from './index.vue';  
import myRouter from './../routers/myRouter';  
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 };  
}  
module.exports = function createApp(ctx) {  
    return createVueInstance(myRouter, ctx);   
} 

注：在我所在的项目中，需要动态判断是否需要注册DicomView，只有在客户端才初始化DicomView，由于Node.js环境没有window对象，对于代码运行环境的判断，可以通过typeof window === 'undefined'来进行判断。

避免创建单例

如Vue SSR文档所述：

（编辑：晋中站长网）

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