前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >经验之谈-关于实际项目微前端优化

经验之谈-关于实际项目微前端优化

作者头像
winty
发布于 2021-07-01 10:28:51
发布于 2021-07-01 10:28:51
1.6K00
代码可运行
举报
文章被收录于专栏:前端Q前端Q
运行总次数:0
代码可运行

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

场景

  1. 一个在某某行业为运营商提供服务的科技公司
    • 首先会开发一个关于机器各种功能的运营系统(机器中心)
    • next,要为供应商提供数据分析的系统(数据中心
    • next,为运营商提供各种促销活动(营销中心)
    • …. (业务更多,需要的管理系统也很多)短期之内全部用一个前端项目开发,没有问题。但是当业务量不断扩展,从开发到用户会有各种影响(当然分多个项目也没问题,但是用户需要记住N个链接)

image (1).png

这么就会出现问题

开发:

  • 代码量大,打包慢,包体积大,时间越长
  • 整个系统的ui主题不好管理
  • 每一次迭代上线,影响面大
  • 代码耦合混乱,不敢动,牵一发何止动全身

用户:访问会越来越慢,很容易受到开发上线影响的自己的功能,主题千年不变等等。

思考

如何将一个巨石的管理系统改造拆分(各个中心的模块下面还有几十个菜单)

微前端是个啥

将前端应用分解成一些更小、更简单的能够独立开发,测试、部署的小块,而在用户看来仍然是内聚的单个产品。微前端的三个要素,即:独立运行、独立开发(与技术栈无关,应用之间不应该有任何直接或间接的技术栈、依赖、以及实现上的耦合)、独立部署

优势

  1. 复杂度可控: 每一个UI业务模块可以由独立的前端团队开发,避免代码巨无霸,便于维护与开发效率。
  2. 独立部署: 每一个模块可单独部署
  3. 技术选型灵活: 在同一项目下可以使用如今市面上所有前端技术栈,也包括未来的前端技术栈。
  4. 容错: 单个模块发生错误,不影响全局。
  5. 扩展: 每一个服务可以独立横向扩展以满足业务伸缩性,与资源的不必要消耗;

希望改造成这样

对外,看上去是一个系统。对内又可以分多个web项目

WeChatcf7b6c8ed331d55a1ac4fa5046d162d6.png

常见的实现方式

  1. 传统iframe
  • 优点:应用之间自带沙箱隔离
  • 缺点:重复加载脚本和样式
  • 需要解决的问题:
    • 布局问题:iframe必须给一个指定的高度,否则会塌陷
    • 弹窗及遮罩层问题:只能在iframe范围内垂直水平居中,没法在整个页面垂直水平居中(可使用全局的弹窗)
    • 浏览器前进/后退问题:iframe页面刷新会重置(比如说从列表页跳转到详情页,然后刷新,会返回到列表页),因为浏览器的地址栏没有变化(push基层进行路由跳转)
    • 每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
  1. 运行时组合(每个子应用独立构建,运行时由主应用负责应用管理,加载,启动,卸载,通信机制)
  • 优点:具有良好的体验,真正的独立开发,独立部署
  • 缺点:复杂,需要设计加载,通信机制,无法做到彻底隔离(基于 shadow DOM 的样式可以实现样式隔离,比如qiankun.js),需要解决依赖冲突,样式冲突问题 浏览器的原生组件,相比第三方框架,原生组件简单直接,符合直觉,不用加载任何外部模块,代码量小(现在流行的React,Vue都是组件框架) 每个子应用需要使用 Web Components 技术编写组件或者使用框架生成
    • 优点:面向未来的技术
    • 缺点:重构代价很大,所有的代码需要用web Components重写
    1. Web Components
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//MDN地址
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
复制代码

目前国内关注度比较高的技术

目前使用比较多的是运行时组合的方案。关注度和成熟度最高的应该就是 single-spa。还有国内关注度很高的蚂蚁金融的框架qiankun

qiankun 是一个生产可用的微前端框架,它基于 single-spa,具备 js 沙箱、样式隔离、HTML Loader、预加载 等微前端系统所需的能力。qiankun 可以用于任意 js 框架,微应用接入像嵌入一个 iframe 系统一样简单(想知道更多请去官网

u=1247095003,2276844947&fm=26&gp=0.jpg

说了这么多,下面才是重点

当前有个项目遇到如下瓶颈

  • 第三方js混乱(jquery,react,vue,angular一锅乱炖)
  • 大多都是jquery代码,代码量大,阅读困难
  • 业务特别多,页面有百来个吧
  • 等等.....

(当然,不可否定,在当时,这是一个架构很好的项目)

优化目标

在不影响原来的项目基础的情况下优化项目,以最小改动,使之既能继承原有的能力,又符合现在的开发习惯和技术方向(注入微服务的思想

解决方法

针对这个项目iframe方案是接入成本最廉价的选择,同时也支持通过possMassage实现父子之间的通讯。而且,对于陈年已久的Jquery多页面的老项目,qiankun对多页应用没有很好的解决办法。每个页面都去修改,成本很大也很麻烦,但是使用 iframe 嵌入这些老项目就比较方便。 (新建两个子项目vue/react各一个,在原来的架构下,开发访问)

需要解决的问题:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
使用iframe,并且路由中以 **“#/iframe”** 开头即可访问并隐藏其他的内容,分开iframe与原有的内容的并且通过显示隐藏进行切换
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
解决访问关系,即本地开发和线上访问(线上访问打包后的内容,线下访问本地能热更新代码)本地访问地址(自动截取iframe后面的url并访问)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//本地
http://localhost:8080/main/index.html/#/iframe/http://localhost:3001
//线上访问地址(localhost改为ip地址):
http://localhost:8080/main/index.html/#/iframe/test/dist/index.html
复制代码
  1. 配置代理解决本地访问跨域
  2. 由于原来的项目,属于直接访问文件,所以子项目的打包需配置相对路径 因为dist文件是需要放在服务器上运行的,资源默认放在根目录下。打开index.html可以发现,css和js文件的引用使用的是绝对路径。但对本地磁盘来说,/指向磁盘根目录,所以会找不到引用的文件。需修改项目的publicPath为'./'(需要看具体的项目)
  3. 由基层传递菜单给子项目(由项目状况决定,也可以单独控制)
  4. API请求

本地请求启动代理即可(需要注意cookie情况)

  1. 由于iframe的缺陷,使用弹窗及遮罩层问题(基层提供全屏方案,即子项目调用基层的全屏的弹窗)
  2. 基层架构与子项目之间的数据交流

WeChat670866049dadbe4c596ea0515df99f1c.png

为符合线上线下都能使用(线下存在同源问题),使用postMessage实现,然后项目内部使用公共bus,传播基层传递过来的消息(依据项目的技术情况)

有个注意点:在react项目中可以等待基层将所有的信息准备完毕并传递给子项目之后再渲染主要内容。但是在vue中延迟挂载app.mount('#app')会报错。所以使用公共bus将基层信息,传播给子项目

运行方式

本地开发运行两个项目,一个是基层的一个是独立的项目

最后

最后和某位大佬有个讨论点,就是iframe做微前端不好。因为看了why not ifram这篇文章。但个人觉得,用哪个还是要看实际情况,针对这次项目优化,你的目标是啥。qiankun.js就牛了?是的蛮牛的,但是不能因为iframe比较上年纪,就嫌弃。。。。peace and love

记得给我点赞????

关于本文

来源:阿秋_在路上

https://juejin.cn/post/6966189658132709390

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-06-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端Q 微信公众号,前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
聊聊微前端的原理和实践
本文对微前端的概念和场景进行科普,介绍一些主流的微前端的实现库及其用法,并讲解部分这些库的原理和实践知识。
2020labs小助手
2020/07/27
2.2K0
用微前端 qiankun 接入十几个子应用后,我遇到了这些问题
我们先用 vue-cli快速创建一个项目,作为主应用,这里把他取名为 main-app
winty
2023/12/19
8.5K3
用微前端 qiankun 接入十几个子应用后,我遇到了这些问题
我在公司项目上用了微前端,差点被开除
故事的开头 从微前端的qiankun去年开始火的时候,我就注意到了,我们公司的Saas系统是可以用这个去解决UI、体验上的一些问题,以及让技术栈平滑过渡迁移,但是奈何时机不够成熟 今年抓住了时机,感觉是时候推进微前端了,加上公司内部的星舟平台(Devops平台)也开始推广,我开始寻思改造这个事 改造不为了炫技,仅仅为了提升开发、用户体验!当你需要微前端的时候,再用它 我在公司内部做了一个技术分享 我的微前端改造是利用k8s + qiankun + ingress(path)的配置,达到快速部署的目的,完全无
Peter谭金杰
2022/03/22
9100
我在公司项目上用了微前端,差点被开除
微前端之qiankun微前端
微前端项目是将每一个可以独立开发,测试,部署的子项目集合到一个主项目之下。对于用户来说,主项目仍然是一个完整的产品,而整个组装的过程对于用户来说,是透明的。
雪糕的晴天
2021/04/01
2.7K0
微前端之qiankun微前端
微前端方案 qiankun 的样式隔离能不用就别用吧,比较坑
qiankun 是主流的微前端方案,其他的还有京东的 micro-app、腾讯的 wujie 等。
神说要有光zxg
2023/02/01
2.8K0
2022年了你必须要学会搭建微前端项目及部署方式
一、微前端简介 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用可以独立运行、独立开发、独立部署。 微前端的好处 应用自治。只需要遵循统一的接口规范或者框架,以便于系统集成到一起,相互之间是不存在依赖关系的。 单一职责。每个前端应用可以只关注于自己所需要完成的功能。 技术栈无关。你可以使用 Angular 的同时,又可以使用 React 和 Vue。 微前端的缺点 应用的拆分基础依赖于基础设施的构建
前端进阶之旅
2022/01/06
2.4K0
2022年了你必须要学会搭建微前端项目及部署方式
微前端究竟是什么?微前端核心技术揭秘!
导语 | 微前端是将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的一种手段。本文从微前端的基础理论出发,对其核心技术进行阐述,最后结合项目进行简单的应用实践。 一、微前端背景 (一)什么是微前端 微前端提供了一种技术:可以将多个独立的Web应用聚合到一起,提供统一的访问入口。一个微前端应用给用户的感观就是一个完整的应用,但是在技术角度上是由一个个独立的应用组合通过某种方式组合而成的。 为了防止概念有点抽象,可以看一个具体的例子:上图是一个微前端的demo,主应用中有导航栏,footer组件以及
腾讯云开发者
2022/02/24
2.5K0
[14章附电子书]从0到1落地微前端架构, MicroApp实战招聘网站
能够应对不同技术栈、不同构建工具的巨石应用架构是前端高级工程师的衡量标准之一。本文为你提供一套大型中台项目构建、多技术栈项目融合的最佳落地方案,并结合主流微前端框架MicroApp,流行技术栈Vue3、React18、Nuxt2、Vue2、Vite、Webpack最终聚合实现多个子应用的大型招聘网站,助力你成长为独当一面、具备team leader潜质的前端高级工程师。
小企鹅204415010
2024/04/22
3260
浅入深出的微前端MicroApp
导读 本文将深入浅出地探讨微前端架构模式——MicroApp,从微前端的基本概念、核心优势以及如何在现代web开发中实现它,详解微前端如何使得大型应用能够分解为小型、简单、可独立开发和部署的子应用,同时还能保持各个子应用间的完整性和协调性。此外,本文还将探讨实施微前端时可能遇到的挑战和最佳实践,为开发者提供一条清晰的实施路径,帮助其构建更加灵活和可维护的前端生态系统。
京东技术
2024/02/04
2.3K0
浅入深出的微前端MicroApp
作为面试官,为什么我推荐微前端作为前端面试的亮点?
作为面试官,我经常听到很多候选人说在公司做的项目很简单,平常就是堆页面,写管理端,写H5,没有任何亮点,我以我一次面试候选人的经历分享给大家
linwu
2023/07/27
1.3K0
作为面试官,为什么我推荐微前端作为前端面试的亮点?
微前端自检清单
最近在做公司微前端,整理了一份微前端搭建清单,如果你正在考虑是否要做微前端,不妨做个参考。
疯狂的技术宅
2020/07/22
9660
【微前端】1443- 将微前端做到极致-无界方案
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微前端方案,完善的解决了这些核心诉求。
pingan8787
2022/11/15
5.3K1
【微前端】1443- 将微前端做到极致-无界方案
微前端从singleSpa到qiankun
微前端解决什么问题?近几年前端的工程化知识开发愈演愈烈,后端解耦,前端聚合,兴起微前端的技术主要是因为SPA项目工程,得到了长足的发展,所有的微前端都是为了解决工程与工程之间的粘合问题即是 从所有收集的部分组成并返回一个无缝的HTML页面
用户10106350
2022/10/28
1.3K0
微前端从singleSpa到qiankun
我们是怎么在项目中落地qiankun的
由于业务增长,团队拆分,我们需要将原有系统的一部分模块(Vue实现)迁移到另外一个系统(React)中。但两个系统技术栈不同,导致重构成本变大,但业务又希望在短期内看到效果,后面可以增量的重构。
GopalFeng
2022/08/01
1.5K0
我们是怎么在项目中落地qiankun的
了解一下微前端
微前端不知道什么时候开始变得非常火,结合后台的微服务,可以把一个系统切分为一个个子模块。比如用户模块、权限模块、订单模块等,每一个模块可以单独开发、测试、部署,每个模块还可以使用不同的技术,最后通过主应用加载这些模块。
wade
2020/08/11
5650
一文读懂微前端架构
前端开发在程序猿中无疑是一个比较苦逼的存在,作为一个前端开发,你必须要掌握Javascript,HTML,CSS这三大基础。Javascript作为网络时代最为重要的开发语言,由于其设计上的限制,一直在演进,经历了ES3,ES5,ES6(ECMAScript 2015)... ... 而简单的CSS也无法完成你复杂的需求,你需要Less/Sass/Sytlus来增强你的CSS的功能。这些还远远只是一小部分,你还需要了解:
yuanyi928
2021/05/27
3.1K0
一文读懂微前端架构
你需要了解的几种微前端解决方案
在之前的文章中,我们已经深入剖析了微前端究竟是什么,可以带来什么收益,现在让我们复习一下微前端的概念:
ConardLi
2020/12/15
2.6K0
你需要了解的几种微前端解决方案
金九银十,带你复盘大厂常问的项目难点
作为面试官,我经常听到很多候选人说在公司做的项目很简单,平常就是堆页面,写管理端,写H5,没有任何亮点,我以我一次面试候选人的经历分享给大家
linwu
2023/09/07
1K0
金九银十,带你复盘大厂常问的项目难点
微前端——理论
天下大势,分久必合合久必分。大型组织的组织结构、软件架构在不断的发生变化。一款软件从最初的单一,进行不断的细化,最终变得庞大,从而不得不拆分到不同部门,出现多样化。然而在多样化的道路上,用户厌倦了一家公司的软件却要分散于不同的应用中,于是应用又再一次走向聚合。
maureen
2022/09/25
2.4K0
【微前端】10分钟学会乾坤大挪移
今天刚刚学习了一个微前端框架——乾坤,正着热乎劲,写一篇入门博客。这篇文章不会讨论太多的原理和实现,只是一个入门写 Hello World 的教程。
童欧巴
2021/08/20
1.3K0
【微前端】10分钟学会乾坤大挪移
相关推荐
聊聊微前端的原理和实践
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档