微前端（无界）

news2024/11/19 15:16:30

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

vue3 npm i wujie-vue3 -S

react 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>
复制代码

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409174.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue项目中引入Luckysheet

vue项目中引入Luckysheet

Luckysheet 介绍 Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源。 实现功能 格式设置 样式 (修改字体样式&#xff0c;字号&#xff0c;颜色或者其他通用的样式)条件格式 (突出显示所关注的单元格或单元格区域&#xff1…
阅读更多...
微信小程序(5)——如何制作好看的表格

微信小程序(5)——如何制作好看的表格

✅ 因为 “表格” 在日常统计中无处不在&#xff0c;所以今天来做一做。但是微信小程序不支持 table 标签&#xff0c;我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。 文章目录一、从“html的table”到 “微信小程序的table”二、统一格式的表格三、非统一格式的表格…
阅读更多...
【vuex】unknown action type:home/categoryList报错

【vuex】unknown action type:home/categoryList报错

记录一下今天遇到的bug。在做项目时&#xff0c;想进行vuex模块化开发。 在src/store下暂且建了两个小仓库home和search src/store/index.js import {createStore} from vuex; // 引入小仓库 import home from /store/home/index import search from /store/search/index// 对…
阅读更多...
vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

目录 一、问题描述&#xff1a; 二、原因 三、解决方案 一、问题描述&#xff1a; 学习vue3.0&#xff08; Vue.js - 渐进式 JavaScript 框架 | Vue.js&#xff09;的时候一直使用的家里电脑&#xff0c;项目搭建运行一直没问题&#xff0c;公司近期用vue3.0写项目 npm init…
阅读更多...
(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design

(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design

仿钉钉流程设计器前后端源码 2022年10月17日,重磅开源! 话不多说上码云项目链接,各位觉得有帮助可以点一个star 本项目是基于这个Flowable6.7.2实现的, 后面会开一个Activiti567的分支 本项目在码云地址: Flowable-Activiti仿钉钉流程设计器前后台源码--工作流中台项目-基于…
阅读更多...
第一次尝试制作一个钓鱼网站，小白教程，超细！

第一次尝试制作一个钓鱼网站，小白教程，超细！

**声明&#xff1a;小白一枚&#xff0c;写下来为了记录和学习交流&#xff0c;大神不喜勿喷。 **大体思路&#xff1a;仿页面&#xff0c;社工诱导用户填写信息&#xff0c;提交传入后端&#xff0c;后端获取信息并存储&#xff0c;传回“服务器繁忙”或虚假信息并重定向到真…
阅读更多...
js 各种时间格式的转换

js 各种时间格式的转换

js 各种时间格式的转换 时间格式示例中国标准时间Fri Mar 18 2022 14:24:45 GMT0800(中国标准时间)部分可读字符串Fri Mar 18 2022格林威治时间Fri,18 Mar 2022 06:24:45 GMT现在用的时间标准UTCFri Mar 18 2022 06:24:45 GMTIOS标准时间&#xff08;JSON时间格式&#xff09;…
阅读更多...
Echarts常用配置项

Echarts常用配置项

一、常用配置项描述 title:{}//标题组件 tooltip:{},//提示框组件 yAxis:[],//y轴 xAxis:[],//x轴 legend:{},//图例组件 grid:{},//内绘网格 toolbox:{},//工具 series:[],//数据有关 calculable:true//可计…
阅读更多...
JS高级中的constructor构造函数

JS高级中的constructor构造函数

1.对象原型__proto__和构造函数原型对象prototype里面都有一个constructor属性 2.constructor 称为构造函数 因为它的作用是用于new的实例对象指回构造函数本身 3.constructor 主要用于记录该对象是用于那个构造函数 它可以让原型对象prototype重新指向原来构造他的构造函数…
阅读更多...
Vue｜计算属性

Vue｜计算属性

1. 计算属性1.1 差值语法1.2 methods1.3 计算属性1. 计算属性 1.1 差值语法 开始前分别在项目目录创建文件夹及页面如下 需求1&#xff1a;在两个文本框中分别输入姓和名的同时需要在下方将数据进行拼接组装&#xff0c;效果如下图 如果用传统的方式来实现的话&#xff0c;需要…
阅读更多...
vue2.x的h函数(createElement)与vue3中的h函数

vue2.x的h函数(createElement)与vue3中的h函数

1. vue2.x的 h 函数(createElement) 使用方法及介绍&#xff1a;&#xff08;参考官网提取&#xff09;h函数第一个是标签名字 或者是组件名字&#xff0c;第二个参数是配置项&#xff0c;第三个参数是 innerText &#xff0c;不会帮你转换节点&#xff0c;如果需要转换成节点…
阅读更多...
background-size 之 背景图的尺寸设置

background-size 之 背景图的尺寸设置

目录 一&#xff1a;background-size参数取值 1.0 1.1 二&#xff1a;实例分析 2.1 参数分析 2.2 代码实例分析 引&#xff1a;background-size: 没有设置任何尺寸时使用图片本身的大小&#xff0c;宽度和高度都是auto默认值 可以用px设置成具体的值&#xff0c;也可以使…
阅读更多...
二、pytest+selenium+allure实现web ui自动化

二、pytest+selenium+allure实现web ui自动化

上一章&#xff1a; 一、web ui自动化环境搭建 pytestallureselenium_傲娇的喵酱的博客-CSDN博客_pytestseleniumallure pytest二次开发相关文章&#xff1a; pytest框架二次开发之自定义注解_傲娇的喵酱的博客-CSDN博客 pytest框架二次开发之机器人报警_傲娇的喵酱的博客-…
阅读更多...
前端面试：浅拷贝和深拷贝的区别？

前端面试：浅拷贝和深拷贝的区别？

前些天发现了一个巨牛的人工智能学习博客&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转 那么大家晚上好&#xff0c;我是今天晚上的主讲老师&#xff0c;我是兔哥。 我们在面试中经常会被问到浅拷贝和深拷贝的区别&#xff0c;正好群里…
阅读更多...
百度低代码框架amis介绍及实例讲解

百度低代码框架amis介绍及实例讲解

目录引言为什么用amis&#xff1f;官网这么说的amis不适合做什么&#xff1f;amis框架集成配置与组件概念实例&#xff1a;通过一个CRUD组件实现增删改查列表列表查询查看详情自定义操作按钮提交表单引言 目前低代码概念已经无人不知&#xff0c;随着新冠病毒的爆发&#xff0…
阅读更多...
修改elementUI样式未生效问题（挂载到了body标签上）

修改elementUI样式未生效问题（挂载到了body标签上）

修改挂载到body标签上elementUI样式问题 目录修改挂载到body标签上elementUI样式问题前言一、适用范围二、示例1.目标2.实现思路修改自带样式方法最后看效果总结前言 在使用element-ui库的时候&#xff0c;有时会需要修改它自带的css样式&#xff0c;组件模块化化编程时一般会…
阅读更多...
【Vue3中的响应式原理】

【Vue3中的响应式原理】

Vue3响应式原理 在Vue2的响应式中&#xff0c;存在着新增属性&#xff0c;删除属性以及直接通过下标修改数组&#xff0c;但页面不会自动更新的问题。但是在Vue3中&#xff0c;这些问题都得以解决。 Vue2中的响应式原理 首先我们先看一下Vue2中的响应式原理&#xff0c;其次…
阅读更多...
vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据

vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据

项目场景&#xff1a; 需要VantUI实现的功能 问题描述 vant中的picker选择器&#xff0c;只能用这种数组&#xff0c;来展示数据 columns: [‘杭州’, ‘宁波’, ‘温州’, ‘绍兴’, ‘湖州’, ‘嘉兴’, ‘金华’, ‘衢州’], 往往我们的请求数据&#xff0c;都是这样的。对…
阅读更多...
::before和::after是什么?

::before和::after是什么?

本文从最简单的开始&#xff0c;解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。 content属性 1&#xff09;::before和::after下特有的c…
阅读更多...
图文详解vue.js devtools插件使用方法

图文详解vue.js devtools插件使用方法

Vue.js devtools 背景简介 我们chrome插件网之前介绍过Vue.js devtools&#xff0c;是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展&#xff0c;可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具&#xff0c;可以边侧边栏窗格…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023