vue3中的异步组件到底是干啥的？

异步组件的用途是啥？

减少页面首屏渲染时间，可使用 异步组件来实现

用异步组件来实现，打包时，webpack 可将其自动分包，也就是打包到其他文件里，这样当我们访问页面时，不会立马加载该组件，当需要时才加载，这样就缩短了首屏的渲染时间，达到其目的。

webpack 的代码分别

其实在默认情况下，webpack 在打包时会将组件模块都打包到一起的（比如一个 app.js 文件中）

但这有一些隐患，就是当项目不断的庞大时，那么 app.js 文件的内容就会越来越大，这样就会造成首屏渲染的速度越来越慢。

所以在打包时，我们应该对于一些不需要立即使用的组件，单独地进行拆分，拆分分成一些小的代码块 chunk.js；

这些 chunk.js 文件会在需要时从服务器上加载下来，并且运行代码，显示对应的内容。

webpack 是如何对代码进行分包的？

import('./xxx/xx.js').then(({ xx文件中的函数名 }) => {
  这里调用
})

而异步组件就用到了这种方式来实现的。

Vue 中实现异步组件

更详细的建议参考文档，

对于某些组件，我们希望通过异步的方式来进行加载（目的是对其进行分包处理），那么 Vue 中提供了一个函数: defineAsyncComponent

defineAsyncComponent 使用 （接受俩种类型的参数）

• 类型一： 工厂函数， 该工厂函数需要返回一个 Promise 对象；
• 类型二： 接收一个对象类型，对异步函数进行配置；

工厂函数写法：

对象写法：

Suspense

一个内置的全局组件， 该组件有俩个插槽：

• #default: 如果 default 可以显示，那么显示 default 的内容
• #fallback: 如果 default 无法显示，那么会显示 fallback 插槽的内容

这个全局组件比较适合用于于异步组件， 搭配着 loading 组件来使用