异步组件是对网站的一种优化，其意思就是懒加载，当我们需要用到那个组件的时候才去打包挂载到DOM树上。
为什么要这样设计呢？
一个网站的开发是由非常多的组件构成，如果当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。而且一个网站有很多个网页当我们冲浪时，有很多网页我们可能都不会去打开，所以也没有必要加载。
异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；
组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。
这里介绍三种异步加载方法：
一、通过webpack2.0的按需加载
//注册组件时
components:{
//首次挂载需要用到的组件直接导入注册
Box1:Box1,
Box2:Box2,
//当首次加载用不到组件时，不用导入直接按照以下采取处理
Box3:function(resolve){
require(['./Box3.vue'], resolve)//[]中为组件Box3.vue的路径
}
}
二、通过webpack2+es2015返回一个promise(主流 )
//注册组件时
components:{
//首次挂载需要用到的组件直接导入注册
Box1:Box1,
Box2:Box2,
//当首次加载用不到组件时，不用导入直接按照以下采取处理
Box3:()=>import('./Box3.vue')//括号中为路径位置,import()返回promise对象
}
三、高级异步组件（可以处理加载状态）
常常用在路由中使用，vue 2.3.0+ 新增终极解决方案,要求路由2.4.0+
//注册组件时
components:{
//首次挂载需要用到的组件直接导入注册
Box1:Box1,
Box2:Box2,
//当首次加载用不到组件时，不用导入直接按照以下采取处理
Box3:() => ({
// 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
component: import('./Box3.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 超时时间，如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 3000
})
}
其中LoadingComponent和ErrorComponent组件需要我们自己手动创建配置，命名也可以任意命名。