Vue Router 懒加载的三种方案

1、vue异步组件

这种情况下一个组件生成一个js文件

{
    path: '/home',
    name: 'home',
    component: resolve => require(['../components/home.vue'], resolve)
}

2、es提案的 import()

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件
const home = () => import('@/views/home/home.vue')
const index = () => import('@/views/index/index.vue')

// 下面2行代码，指定了相同的 webpackChunkName，会合并打包成一个js文件
const home = () => import(/* webpackChunkName: "home" */ '@/views/home/home.vue')
const index = () => import(/* webpackChunkName: "home" */ '@/views/index/index.vue')
export default new Router({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: home
        },
        {
            path: '/index',
            name: 'index',
            component: index
        }
    ]
})

3、webpack 的 require.ensure()

多个路由指定相同的 chunkName，会合并打包成一个js文件

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
    path: '/hello',
    name: 'Hello',
    component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}