动态加载模块通过配置驱动按需加载，避免初始包过大；利用Map缓存Promise防重复请求，拼接版本哈希实现缓存隔离；支持错误降级与微前端协同加载。
动态加载模块让大型配置化系统能按需获取功能，避免初始包体积过大，同时支持运行时灵活扩展。
基于配置驱动的模块加载
系统通过 JSON 或 YAML 配置描述页面结构、组件类型、数据源等，当路由切换或用户操作触发某模块时，再根据配置中的模块路径（如 "@modules/report/chart"）调用 import() 动态加载对应代码。
例如：配置项 {"type": "chart-widget", "module": "./widgets/BarChart.js"}，渲染时执行 const { BarChart } = await import(widgetConfig.module)，然后挂载实例。
模块缓存与版本隔离
同一模块可能被多个配置项引用，需避免重复加载；同时灰度发布时又要支持新旧版本共存。
立即学习“Java免费学习笔记（深入）”；
- 用 Map 缓存已加载模块的 Promise，防止并发重复请求
- 在模块路径后拼接版本哈希（如
./FormEditor.js?v=2.3.1），配合构建工具生成带 contenthash 的文件名，实现浏览器级缓存分离 - 对关键模块（如权限校验器）做独立加载+本地注册，确保不同业务模块使用同一实例
错误降级与兜底策略
网络异常、模块缺失或导出不兼容都会导致加载失败，不能让整个页面白屏。
- 捕获
import()的 reject，显示轻量级占位组件（如“模块加载中…”或默认静态卡片） - 配置中可声明
fallback: "./components/EmptyWidget.js"，失败时自动加载备用模块 - 记录加载失败的模块名、URL、错误堆栈到监控系统，辅助快速定位配置错误或构建遗漏
与微前端协同加载
在微前端架构中，主应用常作为配置中心，子应用模块也通过动态 import 加载，但需额外处理沙箱、样式隔离和生命周期。
建议：主应用统一管理子应用的入口地址与激活规则，加载前校验其导出的 bootstrap/mount/unmount 方法是否存在；用 import.meta.url 推导公共路径，避免硬编码 CDN 域名；子应用构建时启用 externals 复用主应用已加载的 React/Vue 等基础库，减小体积。
