提示：异步组件的使用

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack默认打包过程？

• 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起(比如一个app,js文件中 ) ;
• 这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢

基于webpack打包 npm run build 生成 dist 文件 有有个js文件 有app.哈希值.js chunk.windors.哈希值.js :第三方

二、异步组件的使用过程

1.在项目中src文件加下 创建文件夹（异步组件的使用） —> App.vue 和Home.vue 和AsyncCategory.vue

app.vue代码如下（示例）：

   <templete><div>app组件<home></home><async-category /><div></templete>

如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载(目的是可以对其进行分包处理么Vue中给我们提供了一个函数:defineAsyncComponent。 defineAsyncComponent接受两种类型的参数: 类型一工厂函数，该工厂函数需要返回一个Promise对象口 类型二:接受一个对象类型，对异步函数进行配置;

<script>//vue3写法  webpack打包会将AsyncCategory.vue打包到分包里面  需要时才会显示  优化首屏渲染进度
import { defineAsyncComponent } from ' vue' ;
const  AsyncCategory  = defineAsyncComponent (()=> import ('./AsyncCategory.vue'))
//或者
const  AsyncCategory  = defineAsyncComponent ({loader:() =>import ('./AsyncCategory.vue'),loadingComponent:Loading,  //会一闪而过 暂备组件  AsyncCategory 未加载会先显示 Loading 组件//errorComponent,  未加载成功delay:2000,  //延迟  在显示loadingComponent 组件之前 等待多长时间onError :function(err,retry,attempts) {// err 错误信息//retry 函数  调用retry重新加载//attempts 记录尝试次数}
})import Loading from "./Loading.vue"import Home from "./home.vue"import AsyncCategory from './AsyncCategory.vue'  //这里也会打包到app.js中 不优化首屏渲染进度export default  {components : {Home,AsyncCategory }
}
<script>

2.在main.js中使用 import 引入 （异步组件的使用）这个文件下的App.vue

代码如下（示例）：

  import App from './异步组件的使用/App.vue'import {sum } from './异步组件的使用/utils/math' //会打包app.js中//可以单独打包//通过import函数 导入的模块   //后续webpack对其进行打包的时候就会进行分包的操作import('./异步组件的使用/utils/math').then(res=>{console.log(res.sum(20,20))})console.log(sum(20,20))

3.在项目中src文件加下 创建文件夹（异步组件的使用） —> 创建文件夹 （utils） --> muth.js

 export function sum (num1,num2) {return num1+num2}

想对AsyncCategory.vue异步组件进行分包

   <templete><div>AsyncCategory组件<h2> {{message}}</h2><div></templete>

<script>export default  {data(){return  { message :'hello Category'}}
}
<script>

suspense插槽

app.vue代码如下（示例）：

   <templete><div>app组件<home></home><suspense><template #default><async-category /></template><template #fallback><loading /></template></suspense><div></templete>