如果想要主应用具备线上动态的微应用管理能力，最简单的方案是动态加载 Script，大致的示例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 主导航设计，这里可以根据后端数据动态渲染导航 -->
<div id="nav">
<button onclick="handleClick('x')">x 应用</button>
<button onclick="handleClick('y')">y 应用</button>
</div>
<!-- 内容区设计 -->
<div class="container">
<!-- 微应用渲染的插槽 -->
<div id="micro-app-slot"></div>
</div>
<!-- 微应用 x：提供 window.xMount 和 window.xUnmount 全局函数-->
<script defer src="http://xxx/x.js"></script>
<!-- 微应用 y：提供 window.yMount 和 window.yUnmount 全局函数-->
<script defer src="http://yyy/y.js"></script>
<script>
function handleClick(type) {
switch (type) {
case "x":
// 告诉微应用需要挂载在 #micro-app-slot 元素上
window.xMount("#micro-app-slot");
window.yUnmount();
case "y":
window.yMount("#micro-app-slot");
window.xUnmount();
default:
break;
}
}
</script>
</body>
</html>
实际业务中，微应用应该维护在后端，通过接口获取
同时启动主应用和微应用的服务，并通过访问主应用的 HTML 实现上述动图中的切换效果。动态 Script 的方案相对于 NPM 方案而言，具备如下优势：
- 主应用在线上运行时可以动态增加、删除和更新（升级或回滚）需要上架的微应用
- 微应用可以进行构建时性能优化，包括代码分割和静态资源分离处理
- 不需要额外对微应用进行库构建配置去适配 NPM 包的模块化加载方式
当然，动态 Script 方案和 NPM 包方案一样，会存在如下问题：
- 主应用和各个微应用的全局变量会产生属性冲突
- 主应用和各个微应用的 CSS 样式会产生冲突