JavaScript动态导入（import()）是微前端按需加载子应用最直接可控的方式，需用绝对URL加载UMD/ESM格式子应用，配合CORS、路由监听、沙箱隔离及预加载策略实现安全高效加载。
JavaScript 动态导入（import()）是微前端中实现子应用按需加载最直接、最可控的方式。它不依赖框架封装，而是从语言原生能力出发，在路由触发、用户交互或空闲时机精准拉取子应用资源，避免初始包膨胀。
用 import() 加载子应用入口文件
子应用需以 UMD 或 ESM 格式导出生命周期钩子（bootstrap、mount、unmount），主应用通过绝对 URL 调用 import() 获取模块：
- 必须使用完整协议+端口的绝对地址，例如
import('https://sub.example.com/entry.js')，相对路径在跨域上下文中会因 base URL 错误导致 404 - 返回 Promise，成功后解构出钩子函数，再传入容器节点、生命周期参数等执行挂载
- 需提前确保子应用服务开启 CORS，否则浏览器直接拦截请求
配合路由监听触发加载与卸载
主应用监听 popstate 或 hashchange，根据当前路径匹配子应用激活规则：
- 路径首次命中子应用规则时，执行
import()→bootstrap()→mount() - 路径离开该子应用范围时，先调用已加载实例的
unmount()，再清空容器内容 - 可缓存已解析的模块对象（如用
Map存 key 为 URL 的 module），避免重复 import 同一地址
加载后必须做沙箱与 DOM 隔离
动态导入只解决代码下载，不提供运行时隔离。子应用若直接操作 window、重写 history.pushState 或插入全局样式，会污染主应用：
立即学习“Java免费学习笔记（深入）”；
- 推荐使用成熟方案（如 qiankun、micro-app）自动创建 Proxy 沙箱，代理全局属性读写和
document、fetch等 API - 若手写沙箱，需拦截 script/style 注入、重写资源请求 base URL、限定 DOM 操作范围到专属容器内
- HTML Entry 模式下，禁止用
innerHTML直接挂载子应用 HTML 字符串，必须用DOMParser解析后逐节点注入，防止内联脚本逃逸沙箱
提升体验的预加载策略
为减少用户点击后的白屏等待，可在非关键时机提前加载子应用代码（不挂载）：
- 利用
requestIdleCallback或Promise.resolve().then()延迟执行import()，避免阻塞主线程 - 在导航菜单 hover、页面空闲、主应用 mount 后等场景触发预加载
- 结合 Service Worker 缓存已加载的子应用 JS，下次访问直接走本地缓存
