Vue——异步组件（懒加载）引入： vue开发过程中，我们会做出特别多特别多的组件，包括login,header,foo

引入：

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

SPA: single page app

在单页应用中，如果没有用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

异步加载并缓存组件：

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

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

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

使用异步组件：

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

//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 全局：
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+

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

便于理解（代码）：

<template>
 	<div id="app">
 		<button @click="fn">xx</button>
 		<keep-alive>
 			<components :is="com"></components>
 		</keep-alive>
 		<!-- <components :is="com"></components> -->
 	</div>
 </template>
 
 <script>
 	import HelloWorld from './components/HelloWorld.vue'
 	export default {
 		name: 'app',
 		data() {
 			return {
 				flag: true,
 				com: "HelloWorld",
 			}
 		},
 		components: {
 			HelloWorld,
 			// HelloWorld2,
 			// "HelloWorld2":() =>  import('./components/HelloWorld2.vue')
 			"HelloWorld2": () => ({
 				// 需要加载的组件 (是一个 `Promise` 对象)
 				component: import('./components/HelloWorld2.vue'),
 				// 异步组件加载时使用的组件
 				loading: import('./components/Palcebox.vue'),
 				// 加载失败时使用的组件
 				error: import('./components/Palcebox.vue'),
 				// 展示加载时组件的延时时间。默认值是 200 (毫秒)
 				delay: 200,
 				// 如果提供了超时时间且组件加载也超时了，
 				// 则使用加载失败时使用的组件。默认值是：`Infinity`
 				timeout: 3000
 			})
 		},
 		methods: {
 			fn() {
 				this.flag = !this.flag
 				this.com = this.flag ? "HelloWorld" : "HelloWorld2"
 			}
 		}
 	}
 </script>
 
 <style>
 </style>

Vue——异步组件（懒加载）

引入：