wujie初探

导读

从iframe到qiankun,微前端的发展逐渐趋于稳定，目前市面上用户量最多的还是qiankun,但并不妨碍后来者的发展，不论是micro-App还是wujie，都是微前端的突出贡献者，他们另辟蹊径，努力将微前端做的更好，也许这就是技术的魅力所在，不断的创新，不断的突破，不断的进步。

笔者将从wujie的角度来探讨它在微前端做出的创新，以及wujie的优势，希望能够对大家有所帮助。本系列文章将分为八篇（短小精悍），努力做到周更，如有错误，欢迎指正。

本文作为初探，将从两个方面来探讨wujie，第一部分是微前端的发展历程，第二部分是wujie的优势。

微前端一二三

微前端是什么

微前端概念的提出，可以追溯到2016年，其提出的背景是基于巨石应用维护带来的开发成本的熵增，其核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，确保微应用真正具备独立开发、独立运行的能力，众所周知，微前端有以下三个特点：

技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权。
独立性强：独立开发、独立部署，子应用仓库独立。
状态隔离：运行时每个子应用之间状态隔离。

微前端实现方案

iframe

iframe是个很古老的技术，早在2000年就已经出现，当微前端概念提出后，我们发现iframe很适合搞微前端，或者说，我们早在微前端提出前就使用iframe来组合我们的应用，只不过到了后来微前端的提出，才将这种方案定义为微前端

iframe有以下优点：

技术成熟，无需学习成本
可以做到完全隔离，不会污染全局
可以做到独立开发、部署，不会影响其他应用

但是iframe也有以下缺点：

路由状态丢失，刷新后，iframe的url状态就丢失了
dom割裂严重，弹窗只能在iframe内部展示，无法覆盖全局（对于大部分B端系统，笔者觉得这个问题不大）
子应用之间通信苦难（当然，可以通过postMessage来实现）

qiankun

qiankun是蚂蚁金服开源的微前端框架，其核心目标是解决微前端的路由、状态、通信等问题，其核心特点是：

基于single-spa，实现了js的沙箱隔离以及css的隔离
浏览器刷新、前进、后退，都可以作用到子应用上
子应用之间通信更加方便，全局注入，提供了更加完善的通信机制

qiankun的缺点： 1.css隔离不彻底，个别场景下依然会有样式污染的问题 2.改造成本较大，webpack、代码、路由等等都要做一系列的适配

无界

在乾坤的issue中一个议题非常有意思，有个开发者提出能否利用iframe来实现js沙箱能力，这个idea启发了无界方案

无界的微前端实现方案是webComponents+iframe,webComponents负责子应用的渲染，iframe负责子应用的js隔离，这样做的好处是：

使用iframe天然的js隔离，不会污染全局
使用webComponents承载子应用的渲染，当然css也作用于webComponents内部，不会污染全局
在iframe内部进行history.pushState，会作用到浏览器，当前进后退的时候，不用做处理就可以作用到子应用上，至于刷新的问题，无界通过劫持history.pushState和history.replaceState，将url作用到主应用的query上，当刷新时，读取query,在作用到子应用上（突然想起来，当年自己使用iframe方案是，为了解决刷新的问题，通过在子应用内监听路由变化，并将url通过postMessage方式同步到主应用，主应用存储到localStorage，刷新的时候，优先读取localStorage的方式，以此来解决刷新问题）
无界提供了三种通信机制，应用之间通信更加方便

至于无界有哪些缺点，引文笔者没用过，所以不予置评

无界使用

官方的文档很简洁明了，还是很容易上手无界的，主要分为主应用的改造和子应用的改造

主应用

主应用的接入很简单，只需要在主应用中引入wujie即可，vue2项目如下：

js 复制代码

import WujieVue from "wujie-vue2";
Vue.use(WujieVue);
const { setupApp, preloadApp, bus } = WujieVue;

注册子应用

js 复制代码

setupApp({
  name: "vue2",
  url: hostMap("//localhost:7200/"),
  exec: true,
});

子应用

在满足跨域条件下子应用可以不用改造。对于单例模式的子应用，需要在子应用做改造，vue2项目如下：

js 复制代码

if (window.__POWERED_BY_WUJIE__) {
  let instance;
  window.__WUJIE_MOUNT = () => {
    const router = new VueRouter({ routes });
    instance = new Vue({ router, render: (h) => h(App) }).$mount("#app");
  };
  window.__WUJIE_UNMOUNT = () => {
    instance.$destroy();
  };
} else {
  new Vue({ router: new VueRouter({ routes }), render: (h) => h(App) }).$mount("#app");
}

无界的使用就是这么简单，有兴趣的可以去官网看看，官网地址：wujie-micro.github.io/doc//

总结

本文主要是对微前端的发展历程做了一个简单的介绍，以及当前市面上用到的微前端技术方案做了些对比，最后对无界的技术方案做了一个简单的介绍，后续文章将会对无界的技术底层做更加深入的探讨，敬请期待。

微前端(wujie)-1.初探.md

wujie初探

导读

微前端一二三

微前端是什么

微前端实现方案

iframe

qiankun

无界

无界使用

主应用

子应用

总结