vueRouter--路由懒加载

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

结合 Vue 的异步组件和 Webpack 的代码分割功能，可以轻松实现路由组件的懒加载。首先回顾如何实现一个vue的异步组件

//定义一个异步组件
function foo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
       resolve({ /*组件对象*/ })
     }, 1000)
  });
}

//注册异步组件
Vue.component('async-component', foo);

而在 Webpack 中，我们可以借用动态 import语法来对.vue文件自动实现异步化封装。只需向下面这样引用.vue文件即可

import('./xxxx.vue') // 返回Promise

注意：如果你使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。意思要先安装npm install babel-plugin-syntax-dynamic-import --save-dev，然后配置.babelrc文件，没有就新建，然后配置如下内容。

{
  "presets": [ "es2015" ],
  "plugins": ["syntax-dynamic-import"],
  "comments": false
}

结合上面的2部分的内容，就知道如何定义异步懒加载路由了，如下所示

//此处没有指定webpackChunkName，所以每个组件打包成一个js文件

constrouter = new VueRouter({
  routes: [{
     path: '/foo', 
     component: () => import('./foo.vue'),
  }]
})

//此处指定了相同的webpackChunkName，会合并打包成一个js文件
constrouter = new VueRouter({
  routes: [{
     path: '/foo', 
     component: () => import(/* webpackChunkName: "group-foo" */ './foo.vue'),
  },{
    path: '/bar', 
    component: () => import(/* webpackChunkName: "group-foo" */ './bar.vue'),
  }]
})