Vue组件异步加载

一、vue的非编译模式

基于requireJS+VUE搭建的环境

（1）路由配置信息

A、异步加载组件

define(function(){
    return [{
                name: "my-component",
                path: "/myComponent",
                component: resolve => require(['myComponent'], resolve),
            }];
});

B、同步加载组件

define(['myComponent'],function(myComponent){
    return [{
	    name: "my-component",
	    path: "/myComponent",
	    component: myComponent,
	}];
});

（2）组件或第三方库

A、懒加载组件

define(function(){
    let dayjs=null;
    return {
        data () {
				
        },
        beforeCreate(){
            dayjs=require('dayjs');
        }
    }
});

B、同步加载组件

define(['dayjs'],function(dayjs){
    return {
        data () {
			
        }
    }
});

二、vue的编译模式

（1）路由配置信息

A、异步加载组件

let myComponent	= resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) 
//或者  需要syntax-dynamic-import插件
//let myComponent =()=> import('myComponent.vue')

let routes=[{
	    name: "my-component",
	    path: "/myComponent",
	    component: myComponent,
	}];

B、同步加载组件

import myComponent from 'myComponent.vue'

let routes=[{
	    name: "my-component",
	    path: "/myComponent",
	    component: myComponent,
	}];

（2）组件或第三方库

A、懒加载组件

export default {
    beforeCreate () {
        import('dayjs').then(module => {
            this.dayjs = module;
        });
    },
    data () {
        return {
            dayjs: null
        }
    }
}

B、同步加载组件

import dayjs from 'dayjs'

export default {
    data () {
        
    },
    mounted () {
        
    }
}

（3）配置编译多文件