vue路由懒加载的3种方式

vue 异步组件

ES6 的 import()

webpack 的 require.ensure()

vue异步组件

 vue 异步组件 这种方法主要是使用了 resolve 的异步机制，
 用 require 代替了 import 实现按需加载

export default new Router({
  routes: [
    {
      path: '/home',',
      component: (resolve) => require(['@/components/home'], resolve),
    },
    {
      path: '/about',',
      component: (resolve) => require(['@/components/about'], resolve),
    },
  ],
})

ES6 的 import

ES6 的 import() vue-router 在官网提供了一种方法，可以理解也是为
通过 Promise 的 resolve 机制。因为 Promise 函数返回的 Promise 
为 resolve 组件本身，而我们又可以使用 import 来导入组件。

export default new Router({
  routes: [
    {
      path: '/home',
      component: () => import('@/components/home'),
    },
    {
      path: '/about',
      component: () => import('@/components/home'),
    },
  ],
})

webpack

webpack 的 require.ensure() 这种模式可以通过参数中的 
webpackChunkName 将 js 分开打包。

export default new Router({
  routes: [
    {
      path: '/home',
      component: (resolve) => require.ensure([], () => resolve(require('@/components/home')), 'home'),
    },
    {
      path: '/about',
      component: (resolve) => require.ensure([], () => resolve(require('@/components/about')), 'about'),
    },
  ],
})
复制代码