vue路由懒加载

引用官网的一句话，当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合webpack的代码分割功能即可实现一个简单的懒加载

const index = resolve => {
    import('@/components/index/Index').then(module => {
        resolve(module)
    })
}

//引入方式
const router = new Router ({
     route:[{
            path: '/',
            name: 'Index',
            component: Index
    }]
})

还有一种推荐的方式

// r就是resolve，最好是将他们写成一行以减少空间的占用
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
    routes: [
        {
           path: '/list/book',
           component: list,
           name: 'book'
        }
    ]
})