JavaScript中动态导入（import()）是微前端子应用按需加载的核心机制，它在运行时加载子应用UMD/ESM入口文件，返回Promise以调用bootstrap/mount/unmount钩子，需配合CORS配置、沙箱隔离、路由监听及预加载策略实现稳定高效的微前端架构。
JavaScript 中动态导入（import()）是实现微前端子应用按需加载的核心机制，它让主应用能在运行时决定加载哪个子应用，避免初始包体积过大、提升首屏性能。
动态导入子应用的 JS 资源
子应用通常以 UMD 或 ES Module 形式暴露生命周期钩子（如 bootstrap、mount、unmount）。主应用通过 import() 加载其入口文件（如 http://localhost:8081/entry.js），返回一个 Promise，解析后即可调用对应方法：
- 确保子应用服务支持 CORS，否则浏览器会拦截跨域请求
- 推荐使用绝对 URL（含协议和端口），避免相对路径在不同基路径下出错
- 可配合
fetch预检或缓存策略（如 Service Worker）优化重复加载
配合沙箱与容器隔离子应用运行环境
动态导入只解决代码加载，但子应用可能污染全局作用域（如修改 window、重写 history.pushState）。实际微前端框架（如 qiankun、Garfish）会在 import() 后自动构建沙箱（Proxy 沙箱或快照沙箱），并在 mount 前激活、unmount 后还原。若手写，需注意：
- 拦截全局变量读写，避免子应用间冲突
- 代理
document、location等 API，使其操作限定在子应用专属 DOM 容器内 - 重写
fetch和XMLHttpRequest，将请求 base URL 自动补全为子应用域名
路由驱动的子应用加载与卸载
主应用监听浏览器路由变化（如 popstate、hashchange 或使用 History API 封装），匹配当前路径对应子应用后触发加载：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 首次访问子应用路径时执行
import()+bootstrap+mount - 切换到其他子应用或主应用页面时，先调用原子应用的
unmount，再加载新应用 - 可添加 loading 状态、错误 fallback（如展示“子应用加载失败”提示）提升体验
预加载与资源预取优化体验
为减少用户点击后的等待时间，可在空闲时机（如主应用空闲、鼠标悬停菜单项）提前 import() 子应用模块，但暂不挂载：
- 利用
Promise.resolve().then()或requestIdleCallback延迟执行，避免阻塞主线程 - 缓存已加载的模块对象（如存入 Map），避免重复 import 同一地址
- 对非关键子应用（如后台管理页），可设置超时或取消机制防止长期占用带宽
动态导入本身很简单，但要稳定支撑微前端，还需配套沙箱、路由同步、样式隔离、公共依赖共享等能力。建议优先使用成熟方案（如 qiankun），在理解原理基础上按需定制。
