模块执行上下文指微应用运行所需的隔离环境，涵盖JS沙箱、CSS作用域、模块加载上下文及生命周期透传四大维度，保障子应用安全独立运行。
JS 沙箱隔离：防止全局污染和变量冲突
多个微应用可能同时使用 React 或 Vue，若共用 window 对象，容易出现 React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 冲突或重复初始化问题。
- qiankun 使用三套沙箱机制：快照沙箱（适用于单实例）、代理沙箱（支持多实例）、Legacy 沙箱（兼容低版本）
- micro-app 基于 Web Components + Shadow DOM + Proxy 拦截，自动重写 script 标签并隔离
window、document、location等 API - 自研方案需重点拦截：全局对象读写、定时器、事件监听、fetch/XHR、history.pushState
CSS 作用域控制：避免样式穿透与覆盖
CSS 是微前端中最易被忽略却最常出问题的上下文维度。一个子应用的 .btn { color: red; } 可能意外影响整个页面。
- 推荐启用 CSS Modules 或 CSS-in-JS（如 Emotion），天然生成哈希类名
- 若用普通 CSS，需在构建阶段注入命名空间前缀（如通过 postcss-prefix-selector 插件）
- qiankun 默认开启样式隔离（
strictStyleIsolation: true），将子应用样式包裹进<style scoped>并限制作用域 - micro-app 利用 Shadow DOM 天然隔离，无需额外配置
模块加载上下文：动态决定“谁来加载、何时加载、用什么版本”
模块联邦（Module Federation）或远程模块注册后，实际加载时刻的上下文决定了行为一致性。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 前端发现服务返回的模块元信息（URL、版本号、入口、依赖映射）构成加载上下文基础
- 主应用需根据当前路由、用户角色、灰度标签等条件动态选择模块版本（例如：
catalog-2.0.0给 VIP 用户，catalog-1.0.0给普通用户） - Webpack Module Federation 的
shared配置必须与子应用保持一致，否则会触发重复加载或版本错配（如 React 被加载两次） - 建议在加载前校验
__webpack_share_scopes__.default中已注册的 shared 库版本是否匹配
生命周期与上下文透传：让子应用感知运行环境
微应用不能是黑盒，它需要知道当前是否处于基座环境、用户登录态、主题色、语言偏好等上下文信息。
立即学习“前端免费学习笔记（深入）”；
- 基座可通过 props 注入（如
props={user, locale, theme}）或全局事件总线（customEvent）广播上下文变更 - 子应用在
bootstrap/mount/unmount生命周期钩子中响应上下文变化（例如：挂载时拉取对应 locale 的 i18n 资源） - 避免硬编码 API 地址，改用基座传递的
config.apiBase或通过window.__MICRO_APP_ENV__获取环境变量 - 推荐封装统一的 Context SDK（如
@myorg/micro-context），提供useAppContext()Hook 供各技术栈子应用调用
