vue项目打包优化--路由懒加载

同过路由懒加载可以实现vue组件按需加载,缩短首次进入等待时间

vue 路由懒加载的配置示例如下:

import Vue from 'vue'
import Router from 'vue-router'
import { resolve } from 'path';

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/baseMain',
            component: resolve => require(['@/components/projectManage/baseMain'],resolve),
            children: [
                {
                    name:'projectList',
                    path: '/projectList',
                    component: resolve => require(['@projManage/projectAdmin/projectList'],resolve),
                },
                {
                    name:'projectDetails',
                    path: '/projectList/projectDetails',
                    component: resolve => require(['@projManage/projectAdmin/projectDetails'],resolve)
                },
                {
                    name:'frontResource',
                    path: '/frontResource',
                    component: resolve => require(['@projManage/resourceManage/frontResource'],resolve)
                },
                {
                    name:'backResource',
                    path: '/backResource',
                    component: resolve => require(['@projManage/resourceManage/backResource'],resolve)
                },
                {
                    name:'checkIndicator',
                    path: '/checkIndicator',
                    component: resolve => require(['@projManage/indicatorManage/checkIndicator'],resolve)
                },
                {
                    name:'publicProject',
                    path: '/publicProject',
                    component: resolve => require(['@projManage/projectAdmin/publicProject'],resolve)
                },
                {
                    name:'myWareHouse',
                    path: '/myWareHouse',
                    component: resolve => require(['@projManage/codeHouse/myWareHouse'],resolve)
                },
                {
                    name:'warehouseSet',
                    path: '/warehouseSet',
                    component: resolve => require(['@projManage/codeHouse/warehouseSet'],resolve)
                },
                {
                    name:'deployedApp',
                    path: '/deployedApp',
                    component: resolve => require(['@projManage/applicationDeploy/deployedApp'],resolve)
                },
                {
                    name:'createDeploy',
                    path: '/createDeploy',
                    component: resolve => require(['@projManage/applicationDeploy/createDeploy'],resolve)
                },
                {
                    name:'selectionApp',
                    path: '/appShop/selectionApp',
                    component: resolve => require(['@projManage/applicationShop/selectionApp'],resolve)
                },
                {
                    name:'selectAPP',
                    path: '/appShop/selectAPP',
                    component: resolve => require(['@projManage/applicationShop/selectAPP'],resolve)
                },
                {
                    name:'submitApp',
                    path: '/appShop/submitApp',
                    component: resolve => require(['@projManage/applicationShop/submitApp'],resolve)
                },
                {
                    name:'systemSet',
                    path: '/systemSet',
                    component: resolve => require(['@projManage/advancedSetup/systemSet'],resolve)
                },
                {
                    name:'personalSet',
                    path: '/personalSet',
                    component: resolve => require(['@projManage/advancedSetup/personalSet'],resolve)
                },
                {
                  name:'createProject',
                  path: '/projectList/createProject',
                  component: resolve => require(['@projManage/projectAdmin/createProject'],resolve)
                },
                {
                  name:'createProjectFrame',
                  path: '/projectList/createProject/createProjectFrame',
                  component: resolve => require(['@projManage/projectAdmin/createProjectFrame'],resolve)
                },
                {
                  name:'selectBackFrame',
                  path: '/projectList/createProject/createProjectFrame/selectBackFrame',
                  component: resolve => require(['@projManage/projectAdmin/selectBackFrame'],resolve)
                },
                {
                  name:'importIndicators',
                  path: '/projectList/createProject/createProjectFrame/selectBackFrame/importIndicators',
                  component: resolve => require(['@projManage/projectAdmin/importIndicators'],resolve)
                },
                {
                    name: 'individuation',
                    path: '/projectList/createProject/createProjectFrame/selectBackFrame/importIndicators/individuation',
                    component: resolve => require(['@projManage/projectAdmin/individuation'],resolve)
                },
                {
                    name: 'checkProject',
                    path: '/projectList/createProject/createProjectFrame/selectBackFrame/importIndicators/individuation/checkProject',
                    component: resolve => require(['@projManage/projectAdmin/checkProject'],resolve)
                },
                {
                    path:'/',
                    redirect:'/projectList'
                }
            ]
        },
        {
            name:'mainContent_edit',
            path: '/mainContent',
            component: resolve => require(['@/components/main_content'],resolve)
        },
        {
            name:'login',
            path: '/login',
            component: resolve => require(['@projManage/login'],resolve)
        },
        {
            path:'*',
            redirect:'/login'
        }
    ]
})

  

posted @ 2018-08-22 13:33  时间脱臼  阅读(1144)  评论(0)    收藏  举报