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

微前端（无界）

news 2025/8/27 16:07:48

前言：微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、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

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/8/14 5:51:59

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/8/25 10:12:48

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/8/24 20:39:38

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/8/21 16:05:51

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/8/25 13:28:16

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/8/23 4:15:44

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/8/22 5:17:58

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2025/8/22 5:18:11

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/8/22 5:43:07