微前端的世界，隔离的艺术

你有想过把一个大项目拆成几个小应用，跑在同一个页面上，却又互不打扰吗？那就是微前端。 它的核心是隔离——样式隔离、JS隔离，还得Neng通信。 下面我就带你随性聊聊怎么搞定这些。

先说 Shadow DOM，那玩意儿真是天然的样式封闭器。 你只要给子应用创建一个 shadowRoot，所有插进去的样式dou不会泄露。

// Shadow DOM样式隔离实现class ShadowDOMStyleIsolation { ... }

代码里我用的是 attachShadow，给每个子应用一个容器，然后把 CSS 注入进去。 对外部 CSS 文件也支持 fetch + inject，省得手动拷贝。

但是注意，Shadow DOM 只在现代浏览器有效；IE 不行。 Ru果你要兼容老版本，就别指望它Neng跑。

还有一种geng轻量级的方法：给每个选择器加唯一前缀。 这叫 CSS Scoped，它在构建时处理规则，把所有 .btn 改成 .btn。 不需要任何运行时开销，只是预处理。

// CSS Scoped隔离实现class ScopedStyleIsolation { ... }

这样Zuo好处是兼容性强，缺点是Ru果你忘记加前缀，还是会冲突。 别忘了全局选择器也得保留。

现在说 JavaScript 隔离吧！常见的有 Proxy 沙箱、快照沙箱和 iframe 沙箱。

// Proxy沙箱实现class ProxySandbox { ... }

Proxy Neng拦截 window 上几乎所有访问，让子应用只kan到自己的视图和状态。 优点：性Neng不错；缺点：写起来有点麻烦，还得考虑构造函数等细节。

// 快照沙箱实现class SnapshotSandbox { ... }

思路hen简单：启动时把 window 的属性快照下来执行完后再恢复原状。 好处是实现容易；坏处是Ru果子应用修改了hen多属性，恢复会慢且容易出错。

// iframe沙箱实现class IframeSandbox { ... }

IFrame 提供完整的独立环境，但要跨域通信就得用 postMessage 或者自定义桥接。 Ru果你想彻底防止污染，这才是真正安全的办法。不过性Neng开销稍大，对 SEO 也不是hen好。

说实话，你遇到这个问题hen常见。有两大原因：

A) 页面内容完全通过 JS 渲染，而百度蜘蛛默认不会执行脚本；B) robots.txt 或 meta noindex 阻止抓取。

"那个那个"，我之前也被困扰过一次。当时页面里全靠 React 渲染内容，百度根本没kan到任何文本，于是直接跳过了索引。后来改成服务端渲染或者给搜索引擎提供静态预渲染页面就解决了。

Ru果你把业务拆成多个子应用，它们肯定需要共享数据或触发事件。这儿有几种常用模式：

// 建立通信桥梁
this.communicationBridge = {
    postMessage: data => { this.iframeWindow.postMessage; },
    onMessage: callback => {
        window.addEventListener('message', event => {
            if callback;
        });
    }
};

"咱就是说"，这种方式Zui直观，也支持双向消息流。只要约定好消息结构，就Neng无缝交互。

"哈哈"，这种模式让子应用像订阅者一样接收全局事件，而主应用Ke以发布事件。不需要跨 iframe 就Neng搞定共享状态，但只Neng在同一进程里工作。Ru果用了 iframe，就只Neng用 postMessage 作为桥梁啦。

"那这个啊"，Ru果你的微前端dou是同一框架，而且想统一状态管理，Ke以把 store 放到主进程，然后子应用通过暴露 API 来读写。但这会导致耦合度升高，一旦改变主 app 的 store 就可Neng连子 app dou受影响。所以通常不建议这么Zuo除非需求明确。

"说实话"，路由同步是微前端难题之一。Ru果主路由改了路径，子应用必须跟着走，否则kan不到页面或出现404。下面介绍几种Zuo法：

#1 主路由负责拼装完整路径，然后传给子应用，让它自己解析。例如 /app1/home -> /app1/home 。这要求子应用内有自己的 router 并且知道自己的 basePath 。

#2 用 EventDrivenRouterManager，监听 history.pushState、replaceState 等事件，再广播给各个子 app，让它们根据自己的 basePath geng新内部路由。这种方式解耦程度高，但代码量稍多。

#3 简单一点，只用 hash 路径分割，例如 #/app1/home、#/app2/settings 。然后主页面根据 hash 切换对应 iframe 或者挂载组件即可。不涉及 pushState，仅适合 SPA 场景。