Vue-异步组件之懒加载

1、 异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；

　　官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。

2、 组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。

方法一：通过webpack2.0的按需加载

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//1 全局：  Vue.component('component-name',function(resolve){  //require 语法告诉 webpack自动将编译后的代码分割成不同的块  //这些块将通过 Ajax 请求自动下载    require(['./my-async-componnet'],resolve)  })  //注册全局组件名，但只有一个名字，没有实体，相当于空的 //当需要这个组件时，调用上面的工厂函数，触发webpack的异步加载模块方法 //然后异步请求一个模块，请求成功后，这个模块内容即为组件实体部分，并对应地方渲染，加载内容也缓存下来。 ​ //2 局部  new Vue({    components: {         'component-name':function(resolve) {            require(['./my-component'], resolve)         }    }  })

方法二：通过webpack2+es2015返回一个promise(主流 )

?

1 2 3 4 5 6 7 8 9 10

//1 全局： Vue.component('component-name',  （）=> import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象,不要问我为什么,人家webpack这样设计的。  ) //2 局部：  new Vue({    components: {        'component-name': () =>  import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象。    }  })

方法三：高级异步组件（可以处理加载状态） 常常用在路由中使用，vue 2.3.0+ 新增终极解决方案,要求路由2.4.0+

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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