## 一：異步加載組件
我們開始了解異步加載組件之前，我們先來了解通常是如何加載組件的。 為此，我創建了一個`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
})
~~~
