文章參考

1. VUE2元件懶載入淺析
2. VUE+Webpack 實現懶載入的三種方式
3. 路由懶載入

Vue官方寫法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: () => import('./components/Home.vue'
 
) },
      { path: '/item/:id', component: () => import('./components/Item.vue') }
    ]
  })
}

commonjs寫法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component:
 
 resolve => require(['./components/Home.vue'],resolve) },
      { path: '/item/:id', component: resolve => require(['./components/Item.vue'],resolve) }
    ]
  })
}

使用建議

建議使用Vue官方推薦的使用方法，如果對第二種commonJS寫法不理解，就需要了解Nodejs中require的用法