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文档所述：

（编辑：湖南网）

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