vue-router懒加载，路由懒加载

为什么要用路由懒加载的方式：

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

从接口目录上看：

        当我们不是使用懒加载的方式会将所有的路由组件模块装进一个js文件，当项目庞大时性能就不好了，这个是使用了懒加载模式的js目录，从图中可以看到每一个路由都是一个单独的js文件，按需加载，项目就可以轻松运行了。

直接配置路由就ok了：

以下是官方给的代码解释：

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

把组件按组分块:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')