Vue中的异步组件

异步组件是对网站的一种优化，其意思就是懒加载，当我们需要用到那个组件的时候才去打包挂载到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组件需要我们自己手动创建配置，命名也可以任意命名。