vue-router优化之懒加载

关于路由的懒加载，官方给我们的解释为:

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

其实就是说我们的每一个路由对应的就是一个给用户展示的页面，然而按照常规的操作这些页面最终会通过webpack打包为一个bundle.js的文件，因此就造成了这个页面十分的庞大，所在在请求的时候可能会花费一定的时间，给用户造成不好的体验。因此我们可以通过路由懒加载的方式来解决这个问题。也就是说不同的路由页面打包成不同的js文件，这样就解决了服务器耗时的问题。

在我们未使用懒加载时，打包vue项目会生成三个文件，一个是app的所有业务代码，一个是组织管理模块关系的代码，还有一个就是项目引入第三方的代码。

接着我们看一下实现懒加载的方式：有三种方式分别是结合异步组件的方式，AMD的方式，es6模块化的方式

在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.所以我们就是用最简单的方式：

 component: () => import('../components/about.vue') 
 

实例：

 routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/hello',
      component: () =>import('../components/HelloWorld.vue') 
    },
    {
      path: '/home',
      component: () => import('../components/home.vue')  
    },
    {
      path: '/about',
      component: () => import('../components/about.vue') 
    },
    {
      path: '/person/:userid',
      component: () => import('../components/person.vue') 
    }
  ],
 

这样一来的最终的打包结果：

我们发现打包后的每个路由界面都有一个js文件，这样一来就可以做到我们按需加载的要求，减轻了服务器的压力