vue异步组件

vue开发过程中，我们会做出特别多特别多的组件，包括login,header,footer,main等等。
这样使整个网站看起来就十分的庞大，当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。

因此，vue为我们专门设立了异步组件，通过异步组件，我们可以得到两点好处：
1 用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；
2 缓存组件，通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

vue鼓励我们在vue中使用函数来标志component属性的值。通常我们有两种方式可以实现异步的组件：

    //在组件中，我们通过在components属性中使用import()函数返回一个
    //promise
    components: {
      'hot-component': () => import('./HotComponent.vue'),
      'nav-component': () => import('./NavComponent.vue')
    },


    //在router中，我们也可以这么做，但也可以使用nodejs的require函数来实现
    //返回一个resolve
    {
      path:'/login',
      name:'login',
      component:(resolve) => {
          require(['../components/LoginComponent.vue'],resolve)
      }
      //LoginComponent
    },

总结说来，就是目前有两种语法形式：

    1 component: () => import('/component_url/');
    2 component: (resolve) => {
        require(['/component_url/'],resolve)
      }

但目前看来，还是第一种语法用起来比较直观。
可以用到异步组件的地方：
1 组件中，组件中需要子组件的位置，我们就可以使用异步组件形式
2 路由中，一般我们打开一个页面时，其总是会进入其中一个默认的路由，那么其他路由在用不到的时候就没必要继续加载，当跳转到当前路由的时候，再来加载，这里也是使用异步组件非常恰当的地方。