极致的微前端框架，成本低、速度快、原生隔离、功能强

IT大咖说

发布于 2022-08-26 14:19:32

1.6K0

发布于 2022-08-26 14:19:32

文章被收录于专栏：IT大咖说IT大咖说

◆ 一、开源项目简介

无界微前端是一款基于 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

引入

// vue2import WujieVue from "wujie-vue2";// vue3import 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://www.toutiao.com/article/7135030234961297950/?log_from=ddc1e052f8638_1661394288113

“IT大咖说”欢迎广大技术人员投稿，投稿邮箱：aliang@itdks.com

来都来了，走啥走，留个言呗~

IT大咖说 | 关于版权

由“IT大咖说（ID：itdakashuo）”原创的文章，转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信：ITDKS10（备注：投稿），茉莉小姐姐会及时与您联系！

感谢您对IT大咖说的热心支持！

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-08-25，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自 IT大咖说微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度