Vue 組件異步加載(懶加載)

1、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,   

 　　

 

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