当前位置： 首页 > news >正文

微前端（无界）

news 2025/7/10 19:52:38

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

微前端概念

微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。

微前端特性

  • 技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈（vue，react，jq，ng等）
  • 独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖
  • 增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性
  • 独立运行时 微应用之间运行时互不依赖，有独立的状态管理

场景演示

  1. 后台管理系统

最外面一层可以当主应用，里面可以放不同的子应用子应用不受技术的限制。

  1. web商店（未来趋势）

例如一些导航网站,可以提供微前端的接入，我们的网站也可以入驻该网站，并且还可以提供一些API增加交互，有点类似于小程序。小程序可以调用微信的一些能力例如支付，扫码等，导航类型的网站也可以提供一些API，我们的网站接入之后提供API调用，可以实现更多有趣的玩法。

微前端方案

iframe 方案

特点

  1. 接入比较简单
  2. 隔离非常稳完美

不足

  1. dom割裂感严重，弹框只能在iframe，而且有滚动条
  2. 通讯非常麻烦，而且刷新iframe url状态丢失

qiankun 方案

qiankun 方案是基于 single-spa 的微前端方案。

特点

  1. html entry 的方式引入子应用，相比 js entry 极大的降低了应用改造的成本；
  2. 完备的沙箱方案，js 沙箱做了 SnapshotSandbox、LegacySandbox、ProxySandbox 三套渐进增强方案，css 沙箱做了 strictStyleIsolation、experimentalStyleIsolation 两套适用不同场景的方案；
  3. 做了静态资源预加载能力；

不足

  1. 适配成本比较高，工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作；
  2. css 沙箱采用严格隔离会有各种问题，js 沙箱在某些场景下执行性能下降严重；
  3. 无法同时激活多个子应用，也不支持子应用保活；
  4. 无法支持 vite 等 esmodule 脚本运行；

底层原理 js沙箱使用的是proxy进行快照然后用用 with(window){} 包裹起来 with内的window其实就是proxy.window 我们声明变量 var name = '小满' 实际这个变量挂到了proxy.window 并不是真正的window css沙箱原理 第一个就是shadowDom隔离 第二个类似于Vue的scoped [data-qiankun-426732]

micro-app 方案

micro-app 是基于 webcomponent + qiankun sandbox 的微前端方案。

特点

  1. 使用 webcomponet 加载子应用相比 single-spa 这种注册监听方案更加优雅；
  2. 复用经过大量项目验证过 qiankun 的沙箱机制也使得框架更加可靠；
  3. 组件式的 api 更加符合使用习惯，支持子应用保活；
  4. 降低子应用改造的成本，提供静态资源预加载能力；

不足

  1. 接入成本较 qiankun 有所降低，但是路由依然存在依赖； （虚拟路由已解决）
  2. 多应用激活后无法保持各子应用的路由状态，刷新后全部丢失； （虚拟路由已解决）
  3. css 沙箱依然无法绝对的隔离，js 沙箱做全局变量查找缓存，性能有所优化；
  4. 支持 vite 运行，但必须使用 plugin 改造子应用，且 js 代码没办法做沙箱隔离；
  5. 对于不支持 webcompnent 的浏览器没有做降级处理；

底层原理 js隔离跟qiankun类似也是使用proxy + with，css隔离自定义前缀类似于scoped

const prefix = `micro-app[name=${appName}]`
复制代码

EMP 方案

EMP 方案是基于 webpack 5 module federation 的微前端方案。

特点

  1. webpack 联邦编译可以保证所有子应用依赖解耦；
  2. 应用间去中心化的调用、共享模块；
  3. 模块远程 ts 支持；

不足

  1. 对 webpack 强依赖，老旧项目不友好；
  2. 没有有效的 css 沙箱和 js 沙箱，需要靠用户自觉；
  3. 子应用保活、多应用激活无法实现；
  4. 主、子应用的路由可能发生冲突；

底层原理 这个东西有点类似于拆包，也可以叫模块共享，例如React有个模块可以共享给Vue项目用Vue2的组件可以共享给Vue3用。

无界微前端 方案

预览demo wujie-micro.github.io/demo-main-v…**

特点

  1. 接入简单只需要四五行代码
  2. 不需要针对vite额外处理
  3. 预加载
  4. 应用保活机制

不足

  1. 隔离js使用一个空的iframe进行隔离
  2. 子应用axios需要自行适配
  3. iframe沙箱的src设置了主应用的host，初始化iframe的时候需要等待iframe的location.orign从'about:blank'初始化为主应用的host，这个采用的计时器去等待的不是很悠亚。

底层原理 使用shadowDom 隔离css，js使用空的iframe隔离，通讯使用的是proxy

部分原文juejin.cn/post/712564…

前置知识了解webComponents

演示webComponents的 传参 样式隔离 以及写法


window.onload = () => {class WuJie extends HTMLElement {constructor() {super()this.init()this.getAttr('url')}init() {const shadow =  this.attachShadow({ mode: "open" }) //开启影子dom 也就是样式隔离const template = document.querySelector('#wu-jie') as HTMLTemplateElementconsole.log(template);shadow.appendChild(template.content.cloneNode(true))}getAttr (str:string) {console.log('获取参数',this.getAttribute(str));}//生命周期自动触发有东西插入connectedCallback () {console.log('类似于vue 的mounted');}//生命周期卸载disconnectedCallback () {console.log('类似于vue 的destory');}//跟watch类似attributeChangedCallback (name:any, oldVal:any, newVal:any) {console.log('跟vue 的watch 类似 有属性发生变化自动触发');}}window.customElements.define('wu-jie', WuJie)
}复制代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script>
</head><body><!--外层写一个div测试隔离--><div>我是div</div><wu-jie url="xxxxxx"></wu-jie><template id="wu-jie"><!--div的样式是作用于全局的--><style>div {background: red;}</style><div>小满zs（测试样式隔离）</div></template>
</body></html>
复制代码

可以完美隔离css样式

前置知识2 monorepo架构

我们采用的是微前端一个主应用，和多个子应用，我们肯定不会一个一个去install安装依赖，太傻了，我们采用monorepo 架构 一次install 即可安装完成。

第一步需要安装pnpm

pnpm内置了对单个代码仓库包含多个软件包的支持，是monorepo架构模式的不二速选

npm i pnpm -g
复制代码

最外层建一个main充当主应用然后新建一个web文件夹里面放两个子应用分别是vue和react

配置monorepo

在根目录新建一个 pnpm-workspace.yaml 配置依赖项

packages:# all packages in direct subdirs of packages/- 'main'# all packages in subdirs of components/- 'web/**'
复制代码

配置完成后install一次就行

他会把所有的公共依赖项抽到外层，而里层的依赖项都是一些最核心的

无界入门

我们使用Vue3来充当主应用 首先需要安装依赖

vue2 npm i wujie-vue2 -Svue3 npm i wujie-vue3 -Sreact npm i wujie-react -S
复制代码

主应用的main.ts

import { createApp } from 'vue'
import App from './App.vue'
import Wujie from 'wujie-vue3'
createApp(App).use(Wujie).mount('#app')复制代码

主应用hellowWord url填写子应用的url 子应用通过npm run dev启动

<template><div><WujieVue width="100%" height="100%" name="xxx" :url="url" ></WujieVue></div>
</template><script setup lang='ts'>
import { ref, reactive } from 'vue'
const url = 'http://127.0.0.1:5174/'
</script><style scoped lang='less'></style>
复制代码

只需要简单的几行代码就可以实现微前端应用，接入成本很低

----------------------后续讲解生命周期，预加载，保活机制------------------------------

相关文章：

微前端（无界）

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

编程日记 2023/3/21 22:58:33

强烈推荐：0基础入门网安必备《网络安全知识图谱》

蚁景网安学院一直专注于网安实战技能培养&#xff0c;提供全方位的网安安全学习解决方案。我们集聚专业网安技术大佬资源&#xff0c;倾力打造了这本更全面更系统的“网络安全知识图谱”&#xff0c;让大家在网络安全学习路上不迷茫。 在这份网安技能地图册里&#xff0c;我们对…...

编程日记 2023/4/13 0:43:48

网络技术与应用概论（上）——“计算机网络”

各位CSDN的uu们你们好呀&#xff0c;今天&#xff0c;小雅兰的内容依旧是计算机网络的一些知识点噢&#xff0c;下面&#xff0c;让我们进入计算机网络的世界吧 网络内涵 网络特征 网络定义 互联网发展过程 从ARPA网络到Internet 从低速互联网到高速互联网 从数据结构到统一网…...

编程日记 2023/3/21 22:48:30

JAVASE/封装、继承、多态

博客制作不易&#xff0c;欢迎各位点赞&#x1f44d;收藏⭐关注前言在学习面向对象编程语言时&#xff0c;封装、继承、多态则是我们必须学习和使用的三大特征。本文通过举例&#xff0c;说明了该三大特征的基本权限特点。一、访问限定符范围private默认权限protectedpublic同一…...

编程日记 2023/3/21 22:43:28

SpringBoot ElasticSearch 【SpringBoot系列16】

SpringCloud 大型系列课程正在制作中&#xff0c;欢迎大家关注与提意见。 程序员每天的CV 与 板砖&#xff0c;也要知其所以然&#xff0c;本系列课程可以帮助初学者学习 SpringBooot 项目开发 与 SpringCloud 微服务系列项目开发 elasticsearch是一款非常强大的开源搜索引擎&a…...

编程日记 2023/3/21 22:38:26

Virtual box磁盘大小调整操作

Virtual box磁盘大小调整操作环境说明思路操作1、挂载要压缩的硬盘到 ~/data2、填充 0 文件3、删除 全是0空文件4、虚拟机关机5、在windows环境下用VBoxManage.exe 进行压缩硬盘加大环境说明 主机 windows 虚拟机 ubuntu 分配了 80G 的硬盘&#xff0c;现在已经占用 80 G 了。…...

编程日记 2023/4/13 0:45:35

MySQL注入秘籍【上篇】

MySQL注入秘籍【上篇】1.数据库敏感信息常用语句2.联合(UNION)查询注入3.报错注入原理常见报错注入函数1.数据库敏感信息常用语句 获取数据库版本信息 select version(); select innodb_version;获取当前用户 select user();获取当前数据库 select database()&#xff1b;数…...

编程日记 2023/3/21 22:28:21

简单三步解决动态规划难题，记好这三步，动态规划就不难

目录一、简单的一维DP剑指 Offer 10- I. 斐波那契数列1、三板斧解决问题2、优雅的解决问题剑指 Offer 63 股票的最大利润1、三板斧解决问题2、优雅的解决问题二、进阶的二维DP剑指offer47 礼物的最大价值1、三板斧解决问题2、优雅的解决问题编辑距离1、三板斧解决问题2、优雅的…...

编程日记 2023/4/13 5:32:32

算法进阶指南打卡

文章目录 基本算法 位运算递推与递归前缀和与差分二分排序倍增贪心总结与练习基本数据结构 栈队列链表与邻接表Hash字符串Tire二叉堆总结与练习搜索 树与图的遍历深度优先搜索剪枝迭代加深广度优先搜索广度变形A*IDA*总结与练习数学知识 质数约数同余矩阵乘法高斯消元与线性空…...

编程日记 2023/3/21 22:18:15

Chapter6.2：其他根轨迹及综合实例分析

该系列博客主要讲述Matlab软件在自动控制方面的应用&#xff0c;如无自动控制理论基础&#xff0c;请先学习自动控制系列博文&#xff0c;该系列博客不再详细讲解自动控制理论知识。 自动控制理论基础相关链接&#xff1a;https://blog.csdn.net/qq_39032096/category_10287468…...

编程日记 2023/3/21 22:13:11

3. 无重复字符的最长子串——滑动窗口

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。 示例 2: 输入: s "bbbbb" 输出: 1 解释: 因为无…...

编程日记 2023/3/21 22:08:09

ChatGPT研究分享：机器第一次开始理解人类世界

0、为什么会对ChatGPT感兴趣一开始&#xff0c;我对ChatGPT是没什么关注的&#xff0c;无非就是有更大的数据集&#xff0c;完成了更大规模的计算&#xff0c;所以能够回答更多的问题。但后来了解到几个案例&#xff0c;开始觉得这个事情并不简单。我先分别列举出来&#xff0c…...

编程日记 2023/3/21 22:03:07

可换皮肤的Qt登录界面

⭐️我叫忆_恒心，一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您，麻烦点个赞👍呗！ 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧，喜欢的小伙伴给个三连支持一下呗。👍⭐️❤️ 可换皮肤的Qt登录界面 QSS的学习笔记 快…...

编程日记 2023/4/13 5:33:29

Spring的常见问题汇总

一、bean实例化1、构造方法底层是无参构造方法来new的对象。2、静态工厂实例化Bean实质上就是&#xff1a;创建一个静态工厂类&#xff0c;然后调用静态工厂类的静态方法&#xff0c;来创建对象。3、实例工厂与FactoryBean实质上就是&#xff1a;创建一个工厂类&#xff0c;工厂…...

编程日记 2023/3/21 21:53:03

yolov8训练筷子点数数据集

序言 yolov8发布这么久了&#xff0c;一直没有机会尝试一下&#xff0c;今天用之前自己制作的筷子点数数据集进行训练&#xff0c;并且记录一下使用过程以及一些常见的操作方式&#xff0c;供以后翻阅。 一、环境准备 yolov8的训练相对于之前的yolov5简单了很多&#xff0c;…...

编程日记 2023/4/13 5:34:39

使用 Python 从点云生成 3D 网格

从点云生成 3D 网格的最快方法 已经用 Python 编写了几个实现来从点云中获取网格。它们中的大多数的问题在于它们意味着设置许多难以调整的参数&#xff0c;尤其是在不是 3D 数据处理专家的情况下。在这个简短的指南中&#xff0c;我想展示从点云生成网格的最快和最简单的过程。…...

编程日记 2023/3/21 21:42:58

vue使用split()将字符串分割数组join()将数组转字符串reverse()将数组反转

1.split() 将字符串切割成数组 const str Hello Vue2 Vue3 console.log(str.split()) console.log(str.split()) console.log(str.split( )) console.log(str.split( , 2)) console.log(str.split( , 6))输出如下 1.split()不传参数默认整个字符串作为数组的一个元素&#xf…...

编程日记 2023/3/21 21:37:57

队列实现及leetcode相关OJ题

上一篇写的是栈这一篇分享队列实现及其与队列相关OJ题 文章目录一、队列概念及实现二、队列源码三、leetcode相关OJ一、队列概念及实现 1、队列概念 队列同栈一样也是一种特殊的数据结构&#xff0c;遵循先进先出的原则&#xff0c;例如&#xff1a;想象在独木桥上走着的人&am…...

编程日记 2023/3/21 21:32:54

【Log4j2远程命令执行复现CVE-2021-12-09】

目录 一、前言 二、漏洞环境构建 三、复现过程 一、前言 Log4j2是基于log4j这个java日志处理组件进行二次开发和改进而来的。也是目前最常用的日志框架之一&#xff0c;在之前的博客中&#xff08;http://t.csdn.cn/z9um4&#xff09;我们阐述了漏洞的原理和大致的利用方…...

编程日记 2023/3/21 21:27:53

Jenkins 平台搭建 | 为 Jenkins 配置 nginx 反向代理

以 Centos7 系统为例&#xff0c;详细记录一下 Jenkins 搭建流程。 参考官网&#xff1a;https://www.jenkins.io/doc/book/installing/linux/#red-hat-centos Install Jenkins 从 redhat-stable yum 存储库中安装 LTS&#xff08;长期支持&#xff09; 版本&#xff0c;该版…...

编程日记 2023/3/21 21:22:51

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/7/10 2:39:03

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/7/10 16:11:12

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2025/7/8 20:48:32

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/7/10 9:34:20

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/7/3 12:34:43

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/7/8 22:35:04

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/6/19 5:23:30

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/7/10 14:29:59

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...

编程新知 2025/7/6 19:33:46