vue 异步组件与组件懒加载

Question

我想把自己路由配置里的 组件改写成异步与懒加载的形式 查了一下资料 发现好像有两种写法 想了解这两种写法有什么大的区别吗 还是说只是语法和写法上的不同呢

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) }
    ]
  })
}

Answer 1

写法不同而已，实际效果时一样的

Answer 2

一个是ES6语法，一个是commonJS语法，