业务中有需求需要加载其他业务线的组件，并且这个组件不固定，vue 提供了异步组件 defineAsyncComponent, 但是官网提供的方案是 import引入本项目组件，而其他业务的代码不在本项目，无法使用此方法，希望是类似微前端的方案，加载一个 umd

defineAsyncComponent 最终resolve一个组件即可

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    resolve(/* 获取到的组件 */)
  })
})

defineAsyncComponent 基本使用

import { defineAsyncComponent } from 'vue'

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

上面的栗子使用 import导入一个组件， 为什么不是直接返回一个Promise， 因为import 本身的返回就是一个Promise，

如果说项目中有个别组件比较大，可以使用异步组件动态加载，打包的时候，打包工具会把此组件分割开，减小文件体积，可以提升加载速度

因为是异步加载，可能存在加载时间，页面空白， vue官网已提供了加载状态的钩子如下

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

已上是vue官网 对 defineAsyncComponent 的使用介绍，但是不符合我们业务的预期

通过 cdn 方式加载组件并渲染

业务组件通过webpack 打包产出一个umd文件 ，umd 文件放在服务器上， 使用的时候通过加载 js 的方式加载

这里需要注意的是，打包的时候 vue 是外置的，因为减少打包后的体积。

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    //这里加载服务服务上的组件
    fetchScript(src).then(res => {
        resolve(res)
    })
  })
})

// 这里进行全局注册，后续使用
app.component('MyComponent', AsyncComp)

其中 fetchScript 函数的作用就是把远程组件加载到本地，并返回组件实例，类似微前端加载子应用方式，实现大致如下

function fetchScript (src) {
    return fetch(src).then(res => res.text()).then( res => {
        // 执行加载到的js文件内容
        eval(res)
        // 返回window挂载的组件名称
        return window['asyncComponent']
    })
}

异步组件只有在你使用此组件的时候在加载，无疑提升了性能，上面说到 vue 是外置的，为了使组件能够正常运行，我们需要在项目中提供Vue运行时，其实也很简单，打包的时候我们指定 Vue在window查找

import * as  Vue from 'vue'

// 将Vue 挂在到window

// 把需要外置的 库 同意挂载到一个对象上面
window.MicroApp = {
    Vue
}

加载其他业务组件功能完成，我们只需要动态配置要加载的组件cdn地址和名称即可,组件已经加载完成了，那如何使用这样一个未知的组件呢，vue 官方提供了 component组件

这样就可以根据组件名称渲染组件

<component :is="componentName"></component>

到此一个动态异步组件就加载并显示在当前业务中了，而且这个组件是不固定的，通过配置不同的地址和名称，显示不同的业务组件