一飞开源，介绍创意、新奇、有趣、实用的免费开源应用、系统、软件、硬件及技术，一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区，共建开源新生态！

一、开源项目简介

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

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

背景

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

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

特性

成本低主应用使用成本低子应用适配成本低速度快子应用首屏打开速度快子应用运行速度快原生隔离css 样式通过 Web Components 可以做到严格的原生隔离js 运行在 iframe 中做到严格的原生隔离功能强大支持子应用保活支持子应用嵌套支持多应用激活支持应用共享支持去中心化通信支持生命周期钩子支持插件系统支持 vite 框架兼容 IE9（需自行 babel 编译）

五、技术选型

快速上手

直接使用

安装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>

常见问题

详见文档

本地开发

运行以下脚本，可以本地开发无界微前端框架，支持实时编译调试开发。

npm i // 安装包依赖 npm run start // 启动所有应用

六、源码地址

访问一飞开源：https://code.exmay.com/