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

一、vue的编译模式

（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,   

 　　

 

（2）组件或第三方库

A、懒加载组件

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 () {} }