业务中有需求需要加载其他业务线的组件，并且这个组件不固定，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>
到此一个动态异步组件就加载并显示在当前业务中了，而且这个组件是不固定的，通过配置不同的地址和名称，显示不同的业务组件
