vue路由懒加载 / 按需加载的两种方式

       当项目过大时，我们可以使用按需加载来减少首屏加载的时间，避免白屏、等待时间过长等问题。

       常用的懒加载方式有两种：

1.vue的异步组件

const routes = [
    {
        path:'./home',
        name: 'Home',
        component: (resolve) => {
            require('../views/Home.vue', resolve)
        }     
    },
    {
        path:'./about',
        name: 'About',
        component: (resolve) => {
            require('../views/About.vue', resolve)
        }     
    },
    {
        path:'./news',
        name: 'News',
        component: (resolve) => {
            require('../views/News.vue', resolve)
        }     
    }
]

export default new VueRouter({
    routes
})

       这样每一个路由组件都被分割成了单独一个js文件，切换路由时按需加载:

2.结合es6的动态import方式（目前官方推荐）

const routes = [
    {
        path:'./home',
        name: 'Home',
        component: () => import('../views/Home.vue')
    },
    {
        path:'./about',
        name: 'About',
        component: () => import(/*webpackChunkName: 'onePart'*/ '../views/About.vue')
    },
    {
        path:'./news',
        name: 'News',
        component: () => import(/*webpackChunkName: 'onePart'*/ '../views/News.vue')
    }
]

export default new VueRouter({
    routes
})

 这里配置加载的时候，我在About和News组件中加入相同的chunkName：/*webpackChunkName: xxx*/，表示将这两个组件打包到同一个异步模块中加载。而 Home组件只要跟其他组件chunkName不一致，就会分割打包成单独的一个js文件：

两种方法都可以实现路由的懒加载，要注意的是import方式需要es6 + webpack2，如果是低版本还是使用reqiure吧～