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

一、vue的编译模式

（1）路由配置信息

 

 

//eg1:
const MSite = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) 

//eg2  需要syntax-dynamic-import插件
const MSite = () => import('../pages/MSite/MSite.vue') //异步加载
//import MSite from '../pages/MSite/MSite.vue' 同步加载

// 声明使用插件
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
    {      
        path: '/msite',
        // 返回路由组件的函数, 只有执行此函数才会加载路由组件, 这个函数在请求对应的路由路径时才会执行
        component: MSite,   

 　　

 

（2）组件或第三方库

A、懒加载组件

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

 

 

B、同步加载组件

 

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