远程组件动态加载需解决模块边界、执行上下文、样式隔离和错误兜底四件事，必须约定统一入口协议、沙箱执行、版本管控与降级策略。
远程组件动态加载不是靠“微内核”三个字就能撑住的，核心在于解决模块边界、执行上下文、样式隔离和错误兜底这四件事。纯用 import() + React.lazy 会在线上突然白屏，因为没处理网络失败、版本不一致、全局副作用污染这些真实问题。
远程组件必须带明确的入口协议，不能只传 URL
直接传一个 https://cdn.example.com/button.js 给加载器是危险的——你不知道它导出什么、是否带副作用、依赖哪些 polyfill。必须约定统一入口格式，比如要求远程模块默认导出一个对象：
{ "component": () => Promise.resolve(Button), "css": "/button.css", "deps": ["react@18"] }
加载器据此做校验和预处理。常见错误是后端返回裸组件函数，导致无法注入样式或检查依赖冲突。
- 强制要求远程模块用
export default { component, css, deps }结构，拒绝export default Button -
css字段支持字符串（内联）或数组（多文件），加载器自动插入<link rel="stylesheet">并去重 -
deps用于比对当前运行时环境，不匹配时拒绝加载并报错RemoteComponentVersionMismatchError
组件渲染必须包裹沙箱容器，否则样式和事件会逃逸
远程 JS 执行后，CSS 选择器若没作用域，会污染主应用；document.addEventListener 若没清理，卸载后仍生效。不能靠开发者自觉写 useEffect(() => { return () => cleanup() }, []) —— 远程代码不可信。
立即学习“前端免费学习笔记（深入）”；
正确做法是在渲染前创建轻量沙箱：
- 用
createPortal把组件挂到独立<div id="remote-slot-123">下，再用 CSS 属性选择器限定作用域：[data-remote-id="123"] .btn { ... } - 劫持远程模块内的
document.addEventListener，自动绑定once: true或记录句柄供卸载时清除 - 禁止远程模块访问
window.location、localStorage等敏感 API，用代理对象抛出RemoteAccessForbiddenError
加载失败必须有降级路径，且降级逻辑不能耦合业务代码
线上最常见的问题是：远程组件加载超时，但 fallback UI 写在业务页面里，导致每次加新插件都要改主应用。应该把降级策略下沉到加载器配置层。
- 每个远程组件声明时指定
fallback: "skeleton" | "placeholder" | (props) => ReactNode，内置三种标准降级模板 - 超时阈值统一设为
5s，由加载器控制，不交给远程模块自己调setTimeout - 错误状态需透出具体原因：
NetworkError、ParseError、ExecutionError，方便监控系统按类型聚合告警
最易被忽略的是热更新场景：远程组件发版后，旧页面里的老实例还在运行，此时新旧版本共存，useState 的初始值可能错乱。必须给每个远程组件实例打上版本指纹，并在检测到版本变更时强制 unmount 后重新 mount，而不是简单 rerender。
