Vue 组件异步加载(懒加载)

一、vue的编译模式

（1）路由配置信息

 1 //eg1:
 2 const MSite = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) 
 3 
 4 //eg2  需要syntax-dynamic-import插件
 5 const MSite = () => import('../pages/MSite/MSite.vue') //异步加载
 6 //import MSite from '../pages/MSite/MSite.vue' 同步加载
 7 
 8 // 声明使用插件
 9 Vue.use(VueRouter)
10 export default new VueRouter({
11   routes: [
12     {      
13         path: '/msite',
14         // 返回路由组件的函数, 只有执行此函数才会加载路由组件, 这个函数在请求对应的路由路径时才会执行
15         component: MSite,

Vue 组件异步加载(懒加载) 　　

（2）组件或第三方库

A、懒加载组件

 1 export default {
 2     beforeCreate () {
 3         import('dayjs').then(module => {
 4             this.dayjs = module;
 5         });
 6     },
 7     data () {
 8         return {
 9             dayjs: null
10         }
11     }

B、同步加载组件

import utiljs from 'utiljs'
export default {
      data () {},    
      mounted () {}
}