微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。通俗来说，就是在一个web应用中可以独立的运行另一个web应用。

无界微前端是一款基于 Web Components + iframe 微前端框架，具备成本低、速度快、原生隔离、功能强等一系列优点。

背景

微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。

Web Components 是一个浏览器原生支持的组件封装技术，可以有效隔离元素之间的样式，iframe 可以给子应用提供一个原生隔离的运行环境，相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location，可以更好的和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式，在实现原生隔离的前提下比较完善的解决了上述问题。

功能上：

• 支持vite
• 多应用同时激活在线
• 框架具备同时激活多应用，并保持这些应用路由同步的能力
• 组件式的使用方式
• 无需注册，更无需路由适配，在组件内使用，跟随组件装载、卸载
• 应用级别的 keep-alive
• 子应用开启保活模式后，应用发生切换时整个子应用的状态可以保存下来不丢失，结合预执行模式可以获得类似ssr的打开体验
• 纯净无污染
• 无界利用iframe和webcomponent来搭建天然的js隔离沙箱和css隔离沙箱
• 利用iframe的history和主应用的history在同一个top-level browsing context来搭建天然的路由同步机制
• 副作用局限在沙箱内部，子应用切换无需任何清理工作，没有额外的切换成本
• 性能和体积兼具
• 子应用执行性能和原生一致，子应用实例instance运行在iframe的window上下文中，避免with(proxyWindow){code}这样指定代码执行上下文导致的性能下降，但是多了实例化iframe的一次性的开销，可以通过 proload 提前实例化
• 体积比较轻量，借助iframe和webcomponent来实现沙箱，有效的减小了代码量

成本：

• 开箱即用
• 不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载，子应用完成接入即可开箱即用无需额外处理，应用接入成本也极低

风险：

• 太新了，今年7月份才发布
• 社区活跃度 star 1.7k（统计时间2022-10-09）
• 文档不是特别齐全
• 使用人数相对较少

直接使用

• 安装

npm install wujie -S

• 使用

import { startApp } from "wujie";

startApp({ name: "唯一id", url: "子应用路径", el: "容器", sync: true });

vue 框架

• 安装

# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S

• 引入

// vue2
import WujieVue from "wujie-vue2";
// vue3
import WujieVue from "wujie-vue3";
Vue.use(WujieVue);

• 使用

<WujieVue
  width="100%"
  height="100%"
  name="xxx"
  :url="xxx"
  :sync="true"
  :fetch="fetch"
  :props="props"
  :beforeLoad="beforeLoad"
  :beforeMount="beforeMount"
  :afterMount="afterMount"
  :beforeUnmount="beforeUnmount"
  :afterUnmount="afterUnmount"
></WujieVue>

react 框架

• 安装

npm i wujie-react -S

• 引入

import WujieReact from "wujie-react";

• 使用

<WujieReact
  width="100%"
  height="100%"
  name="xxx"
  url="{xxx}"
  sync="{true}"
  fetch="{fetch}"
  props="{props}"
  beforeLoad="{beforeLoad}"
  beforeMount="{beforeMount}"
  afterMount="{afterMount}"
  beforeUnmount="{beforeUnmount}"
  afterUnmount="{afterUnmount}"
></WujieReact>

链接: https://fly63.com/nav/3861