深度解析前端架构思想——微前端微前端是一种前端架构思想，把一个庞大的前端应用，拆分成多个独立的小前端应用，每个都可以独立

什么是微前端

微前端（Micro Frontends） 是一种前端架构思想，把一个庞大的前端应用，拆分成多个独立的小前端应用，每个都可以独立开发、独立部署、独立运行，最后在浏览器里组合成一个整体。通俗来说，微前端架构把“一个巨无霸前端”拆成“多个自治的小前端”，像搭积木一样拼起来

主应用在微前端架构中充当容器和调度中心的角色，本身几乎不承载具体业务逻辑，它负责

接管浏览器路由，根据当前 URL 决定加载或卸载哪个子应用；
在需要时动态加载子应用的 HTML、JS 和 CSS 资源，并控制子应用的生命周期（如初始化、挂载和卸载）
提供运行环境能力，包括 JavaScript 沙箱、样式隔离和公共依赖加载，并作为子应用之间的通信枢纽，向子应用下发公共状态或方法，从而把多个独立的前端应用统一组织成一个对用户来说无感知的整体系统。

前端框架接管浏览器原本的路由变化机制，在 URL 发生变化时，不让浏览器按默认方式刷新页面，而是由自己来决定“该做什么”。如果不进行路由劫持，会导致每次跳转都会刷新页面，子应用状态全丢，微前端无法成立。
浏览器默认行为：点击链接 → URL 改变 → 浏览器重新请求 HTML → 整个页面刷新
路由劫持之后：点击链接 → URL 改变 → 框架捕获变化 → 判断当前路由 → 加载 / 卸载对应模块 → DOM 局部更新（不刷新）

微前端

fetch('https://user-app.com/index.html')
→ 解析 html
→ 提取 js / css
→ 动态执行

执行方式

子应用的 JS 不是一开始就加载，而是命中路由才加载

沙箱隔离是微前端中用来解决多个子应用共享同一浏览器环境而产生全局污染的问题，主应用会为每个子应用创建一个受控的运行环境，通过 Proxy 等机制模拟一个“独立的 window”，子应用对全局对象（如 window、document、全局变量）的读写都会被拦截并限制在自己的沙箱中
当子应用卸载时这些修改可以被清理或回滚，从而保证不同子应用之间互不影响、可以同时安全运行。

选择器隔离（scope）

#sub-app button { color: red }

框架自动给所有选择器加前缀

子应用必须暴露 3 个函数

export async function bootstrap() {}
export async function mount(props) {}
export async function unmount() {}

主应用控制节奏

进入路由 → mount
离开路由 → unmount

子应用不是自己启动，是被“调度”启动

总之，微前端不是框架，而是一套浏览器调度机制
微前端 = 路由劫持 + 动态资源加载 + JS 沙箱 + CSS 隔离 + 生命周期管理