在我们的网站性能优化中，为了缩短页面加载的时间，我们就要加载尽可能少的内容，比如一些在首屏中不显示的内容，尽量不去加载，这样就可以提高首屏的速度。
然后在需要显示某些组件时，再去进行异步加载，vue的defineAsyncComponent的方法就给我们提供了这样的功能。
看这个方法名字就知道，用它来定义一个异步组件
components: {
'异步组件的名字': defineAsyncComponent(() => import('异步组件的路径')),
},
通过以上这种方式就可以定义一个异步组件了
我们还是来写一个小dome，
比如在一个企业站中，用户进来时显示一些企业的信息、产品介绍等等
在网站的导航栏上有登录按钮，点击以后显示一个登录框
我们来分析一下，这个登录框默认状态下是不显示，只有用户点击了登录按钮才显示，那么我们就可以把登录框做成一个异步组件，在用户刚刚进入首页时，就不用加载它，提高了首页的速度
1）先来写一个登录框的组件
<template>
<div class="login-box">
<div>登录模块</div>
<form>
<div><label>用户名</label><input type="text" /></div>
<div><label>密码</label><input type="password" /></div>
<div><button type="submit">登录</button></div>
</form>
</div>
</template>
<script>
export default {}
</script>
<style>
.login-box {
display: inline-block;
width: 300px;
padding: 30px 40px;
background-color: #eee;
border-radius: 10px;
}
</style>
这里只是一个示例，UI很丑，大家忍耐一下
2）使用异步组件的方式引入它，默认状态是隐藏的，在点击按钮时，显示登录框
<template>
<div>
<button @click="onClick">点击显示登录</button>
<br />
<login v-if="showLogin"></login>
</div>
</template>
<script>
// 异步组件
import { defineAsyncComponent } from 'vue'
export default {
name: 'App',
components: {
login: defineAsyncComponent(() => import('./components/login')),
},
data() {
return {
showLogin: false,
}
},
methods: {
onClick() {
this.showLogin = true
},
},
}
</script>
<style></style>
我们在开发环境刷新页面，看到的网络请求是
然后点击按钮，显示登录框
就会去加载登录组件
这样就实现了组件的异步组件，大家动手写一写，记不住写法也没关系，用到时去官网去查就行。
在学习开发的过程中，有些语法、写法是需要大家记住的，有些要理解为什么这么做，这么做有什么好处。死记api我是非常反对，因为这些api都是网上随便可以查到的，真正学到的是自己理解了的知识。
在后面学习vuex，大家也需要注意着一点。
