## 一：异步加载组件
我们开始了解异步加载组件之前，我们先来了解通常是如何加载组件的。 为此，我创建了一个`Tooltip.vue`组件：
~~~
// Tooltip.vue
<template>
<h1>Hi from Tooltip!</h2>
</template>
~~~
这里没有什么特别之处，它就是一个简单的组件。我们可以通过局部注册，导入`Tooltip`组件并将其添加到`components`选项中，这样就可以在另一个组件中使用它。比如，在`App.vue`中使用它：
~~~
// App.vue
<template>
<div id="app">
<Tooltip />
</div>
</template>
<script>
import Tooltip from "./components/Tooltip"
export default {
name: "App",
components: {
Tooltip
}
};
</script>
~~~
只要`App`被导入，就可以在初始加载时，`Tooltip`组件就会被导入、使用和加载。但往往有一些组件并不是要立即加载的组件，而是在需要时才加载。
> 我们可以应用异步加载和代码拆分来改进它。异步加载是在稍后的阶段加载某些内容的技术。虽然代码拆分是将一段代码拆分到一个单独的文件（称为**chunk**）中，以便减少应用程序的初始包，从而减轻初始加载。
在Vue中异步加载组件与在封装的函数中动态导入组件一样容易。我们可以像下面这样异步加载`Tooltip`组件：
~~~
export default {
components: {
Tooltip: () => import('./components/Tooltip')
}
}
~~~
使用`() => import('./components/Tooltip')`。即可实现异步加载Tooltip组件，当需要时才会加载Tooltip组件，而不是一开始就加载Tooltip组件。
## 二：处理加载状态
这里的异步组件工厂函数也可以返回一个如下格式的对象：
~~~
const AsyncComponent = () => ({
// 需要加载的组件 (应该是一个 `Promise` 对象)
component: import('./MyComponent.vue'),
// 异步组件加载时使用的组件,加载动画
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)，超过200ms显示加载动画组件
delay: 200,
// 如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 3000
})
~~~
