异步组件的使用（webpack 代码分包）示例 suspense插槽

提示：异步组件的使用

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

一、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>