异步组件的功能

vue项目开发过程中，会写出特别多的组件，这样运用webpack打包后的文件将会很大。当用户进入首页时，就会造成需要加载的内容过多，延时过长，不利于用户体验。此时需要运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时，也就是异步加载并缓存组件。

1.异步加载组件：用不到的组件不会加载，当用到这个组件的时候，才会通过异步请求进行加载。

2.组件缓存：通过异步加载的组件会缓存起来，当下一次再用到这个组件时，组件很快会从缓存中加载出来。

Vue允许以一个工厂函数的方式定义组件，这个工厂函数会异步解析该组件定义。即Vue只有在这个组件需要被渲染时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

异步组件实现方式

方式1：webpack的按需加载，require语法告诉 webpack自动将编译后的代码分割成不同的块，这些块将通过 AJAX 请求自动下载。

//1 全局：
 Vue.component('组件名',function(resolve){
   require(['./componnet/组件所在路径'],resolve)
 })

//2 局部
 new Vue({
   components: {
        'component-name':function(resolve) {
           require(['./my-component'], resolve)
        }
   }
 })
 

方式2：通过webpack和es2015返回一个promise(最常用的方式)

//1 全局：
Vue.component('component-name',
 （）=> import('./my-async-componnet')//这个 import函数会返回一个Promise对象
 )
//2 局部：
 new Vue({
   components: {
       'component-name': () =>  import('./my-async-componnet')
       //这个import函数会返回一个Promise对象。
   }
 })

方法三：高级异步组件（可以处理加载状态）

//工厂函数可以返回一个如下对象，对象里面的一些配置参数
const AsyncComponent = () => ({
  // 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})