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）配置编译多文件