在前端开发的漫漫长河中，我们总会遇到那么几个让人头秃的时刻。尤其是当你手里攥着两个庞大的历史项目——姑且叫它们项目A和项目B吧——突然接到需求说要把它们揉在一起的时候，那种感觉真的只有经历过的人才懂。以前我们可Neng就是简单粗暴地丢个跳转链接，用户点一下“嗖”地一下跳个新页面虽然功Neng实现了但那种割裂感简直就像是在kan一部剪辑混乱的电影，体验极差。

Zui近，我在探索如何让这两个技术栈一致但各自为政的项目“合体”时深入研究了京东物流技术团队开源的一个微前端框架——Wujie。说实话，这玩意儿给我的感觉有点像是在混乱的代码世界里找到了一把瑞士军刀。它不仅仅是一个工具，geng像是一种解决“巨石应用”焦虑的良药。今天我就不想照本宣科地念文档了咱们来点接地气的，聊聊这玩意儿到底怎么玩，以及它和qiankun、iframe这些老前辈比起来到底香在哪儿。

在聊代码之前，咱们得先明白Wujie到底想解决什么问题。微前端这概念火了好几年了大家听得Zui多的可Neng就是阿里的qiankun。qiankun确实强，它是基于Single-SPA搞出来的，用Proxy拦截全局变量Zuo沙箱，CSS通过重写选择器加前缀来隔离。这套方案hen成熟，但说实话，配置起来有时候真的让人想砸键盘，尤其是当你面对一些奇奇怪怪的样式冲突时那个CSS前缀有时候并不那么灵光。

而Wujie走了一条稍微不同的路。它的核心思路非常清奇：既然iframeNeng提供Zui完美的JavaScript隔离，那为什么不好好利用它？Wujie直接用iframe作为JS运行的沙箱，这招其实挺狠的，意味着你完全不用担心子应用里的全局变量污染了主应用，反之亦然。但是iframeZui大的痛点是什么？是那个该死的割裂感，还有UI通信的麻烦，以及样式完全隔离导致无法复用主应用的字体啥的。

这时候，Wujie祭出了它的杀手锏——WebComponent。它通过WebComponent把iframe里渲染的内容映射到主应用的DOM树上。这就像是给iframe开了一扇窗，让它既Neng享受里面的绝对安全，又Neng把内容透传出来和外界的UI融为一体。CSS方面它用了Shadow-DOM机制，这比qiankun的Prefix模式要彻底得多，样式隔离性简直无敌。而且，它原生支持子应用保活、预加载，这对于追求极致用户体验的项目来说简直就是福音。

好了吹了这么多牛，咱们来kankan代码怎么写。假设我们的主应用是一个Vue2项目，我们要把一个React16的子应用给融进来。这过程其实比你想象的要平滑得多。

我们得在主应用的入口文件，比如main.js里Zuo些手脚。我们需要引入Wujie提供的Vue组件包，然后进行一系列的初始化配置。这里有个小细节，生产环境和开发环境的处理要小心，特别是那个attrs配置，是为了防止GitHub Pages那种CSP报错，修正iframe的src地址，不然你可Neng会发现页面怎么dou加载不出来排查半天发现是路径问题，那就搞笑了。

// main.js
import WujieVue from "wujie-vue2";
// 判断一下是不是生产环境，这个习惯得保持
const isProduction = process.env.NODE_ENV === "production";
const { setupApp, preloadApp, bus } = WujieVue;
// 这里有个事件总线，虽然简单，但hen实用
// 比如子应用点了个按钮，告诉主应用“我点了”，主应用就弹个窗
bus.$on => window.alert);
// 路由同步是个大坑，但Wujie处理得不错
// 当子应用路由变了发个通知过来主应用就得跟着变，不然菜单栏高亮就乱了
bus.$on => {
  const mainName = `${name}-sub`;
  const mainPath = `/${name}-sub${path}`;
  const currentName = router.currentRoute.name;
  const currentPath = router.currentRoute.path;
  // 只有当真的变了才去跳转，避免死循环
  if  {
    router.push;
  }
});
// 降级处理，这hen重要，不是所有浏览器dou支持Proxy或者CustomElementRegistry
// Ru果不支持，咱们得有个B计划，虽然体验可Neng差点，但总不Neng崩了吧
const degrade = window.localStorage.getItem === "true" || !window.Proxy || !window.CustomElementRegistry;
// 这里是传给子应用的数据，比如跳转方法
const props = {
  jump:  => {
    router.push;
  },
};
// 修正iframe src，防止CSP报错的小技巧
const attrs = isProduction ? { src: hostMap } : {};
// 核心配置来了
setupApp({
  name: "react16", // 给子应用起个名
  url: hostMap, // 子应用地址
  attrs,
  exec: true, // 立即执行
  props, // 传参
  fetch: credentialsFetch, // 自定义fetch，处理cookie那些事儿
  plugins, // 插件，比如用来修正子应用的一些代码
  prefix: { "prefix-dialog": "/dialog", "prefix-location": "/location" }, // 前缀处理
  degrade, // 降级开关
  ...lifecycles, // 生命周期钩子，加载前、加载后干点啥
});

你kan，这段代码虽然不长，但每一行dou藏着坑。特别是那个bus事件总线，Wujie的数据传递主要靠这个。我之前试过直接传个全局用户信息对象给子应用，结果发现数据变了子应用那边一点反应dou没有，props也不geng新。后来没办法，只Neng老老实实基于事件传递搞了一套自动获取token的逻辑。这事儿也提醒我，微前端里别太指望响应式那种东西，老老实实发消息Zui靠谱。

配置好了主应用，接下来就是在页面里用了。WujieZui让我惊喜的地方就是它把子应用封装成了一个Vue组件。这意味着你不需要去折腾什么动态加载脚本，也不用管DOM怎么挂载，就像平时写

//Vue2Sub

//router.js
{
    path: "/vue2-sub/:path", // 捕获所有子应用路径
    name: "vue2-sub",
    component: Vue2Sub,
},