JS动态导入（import()）是微前端加载子应用的基础机制，支持按需异步加载与错误处理，常嵌入qiankun或Module Federation等框架，需配合沙箱、样式隔离及封装加载器实现安全可控的子应用生命周期管理。
在微前端架构中，JS 动态导入（import()）是加载子应用最基础也最关键的机制——它不依赖框架、不侵入全局、天然支持按需、异步和错误处理。实际应用中，它通常不单独使用，而是作为底层能力嵌入加载中心或微前端框架（如 qiankun、Module Federation），但理解其原生写法和组合逻辑，才能真正掌控加载行为。
直接用 import() 加载子应用入口模块
这是最轻量的实现方式，适用于简单场景或自研微前端方案：
- 子应用需暴露一个标准 ES 模块入口（如
bootstrap、mount、unmount导出函数） - 主应用通过动态导入获取该模块，并调用生命周期方法
- 示例代码：
const loadApp = async (appUrl) => {<br>
try {<br>
const app = await import(appUrl);<br>
await app.bootstrap?.();<br>
await app.mount?.({ container: '#sub-app' });<br>
} catch (err) {<br>
console.error('子应用加载失败:', err);<br>
// 可触发降级 UI 或重试逻辑<br>
}<br>
};
配合 Module Federation 的远程模块导入
Webpack 5 的 Module Federation 是生产环境主流选择，import() 在这里用于加载远程暴露的模块，而非原始 URL：
- 子应用配置
exposes暴露组件或生命周期对象 - 主应用在
remotes中声明远程应用地址，然后用语义化路径导入 - 注意：路径格式为
"remoteName/modulePath"，由 Webpack 运行时解析
// 主应用中，无需硬编码完整 URL<br>
const RemoteDashboard = React.lazy(() => <br>
import('dashboardApp/Dashboard') // ← 由 Module Federation 映射到真实远程地址<br>
);
封装成可复用的加载器（推荐）
避免每个子应用重复写 try/catch 和生命周期调用，建议封装一个通用加载器：
- 缓存已加载模块的 Promise，防止重复请求
- 统一处理超时、网络中断、语法错误等异常类型
- 支持传入 AbortSignal，在组件卸载时取消未完成加载
- 返回结构化结果：{ module, error, status }
class SubAppLoader {<br>
#cache = new Map();<br>
load(url, { signal } = {}) {<br>
if (this.#cache.has(url)) return this.#cache.get(url);<br>
const promise = import(url, { with: { signal } })<br>
.catch(err => ({ error: err, status: 'failed' }));<br>
this.#cache.set(url, promise);<br>
return promise;<br>
}<br>
}
与沙箱、样式隔离协同工作
仅靠 import() 加载 JS 不足以保证子应用安全运行，必须配套运行时约束：
- 加载完成后，将模块执行置于沙箱环境中（如 Proxy 拦截 window、document）
- 样式隔离需额外处理：子应用 CSS 可通过
动态插入并添加命名空间前缀，或使用 Shadow DOM 封装 - 不要让
import()返回的模块直接操作全局 DOM；应约定 mount 接口接收容器元素
const app = await loader.load('./apps/reporting/entry.js');<br>
app.mount?.(document.getElementById('reporting-slot'));
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
