Vue 异步组件

webpack代码分包

首先说下webpack的代码分包，vue在打包的过程中会将自己写的代码统一打包再app.js 中 但是随着项目过大，这个文件会越来越大，可能会导致页面加载速度慢，所以我们可以对代码进行拆分，使其按需加载。
我们可以借助webpack和es2015语法来按需引入代码

js代码的分包，这里可以使用魔法注释来定义打包名字

import(/* webpackChunkName: 'math' */"./utils/math").then(({}) => {
  console.log(sum(2, 3));
})

打包结果：

vue实现异步组件

组件也可以异步的进行加载
Vue3提供了一个函数 defineAsyncComponent

使用方式一：
函数可以接受一个工厂函数，需要返回一个Promise对象

const someCon = defineAsyncComponent(() => import(/* webpackChunkName: 'someCon' */"./components/someCom.vue"))

使用方式二：
函数接受一个对象类型，可以对异步函数进行配置

const AsyncCom = defineAsyncComponent({
  loader:() => import(/* webpackChunkName: 'asyncCom' */"@/components/asyncCom.vue"),
  loadingComponent:"xxx"//占位组件，在异步组件未加载出来显示
  errorComponent:"xxx"//加载失败显示组件
  delay:2000//延迟显示组件
  onEror:function(err, retry, fail, attempts){}//错误回调函数，可以尝试重新加载和设置记录重新加载次数
})

当然我们还可以结合 suspense 这个内置组件来使用

因为对象方式配置加载组件和错误组件遇到组件传值时不太好解决，所以我们配合 suspense 可以更好地解决这个问题

default：如果default可以显示，那么显示default的内容

fallback：如果default无法显示，那么会显示fallback插槽的内容

  <suspense>
     <template #default>
         正常组件
     </template>
     <template #fallback>
         加载组件
     </template>
  </suspense>