企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
>[success] # 为什么出现微前端 ~~~ 1.随着业务的越来越大打包速度通过打包工具提供的各种优化打包速度的方案已经不能满足,技术栈的升级 又不想对老代码进行重构但新的代码业务想开始尝试新的技术栈,多个业务之间相同模块的复用等一系列问题 开始寻求一种新的解决方案,将应用拆解成多个更小、更易管理小应用 2.将'一种由多个独立可交付的前端应用组合而成更庞大整体的架构方式'成为微前端 3.'微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。' 各个子应用可以是 相同的技术栈,也可以是不同,我们可以按照模块划分、技术栈划分、为了是将原本的巨石般代码拆开,在合 ~~~ 注:第二条对微前端的定义来自[# Micro Frontends](https://martinfowler.com/articles/micro-frontends.html)参考他的一问来自[# 【译】微前端](https://juejin.cn/post/6964219246528167966#heading-2) >[danger] ##### 更多的解决思路 ~~~ 1.npm包:将子应用封装成npm包,通过组件的方式引入,在性能和兼容性上是最优的方案,但却有一个致命的问题 就是版本更新,每次版本发布需要通知接入方同步更新,管理非常困难。 2.iframe:有一些无法解决的问题,例如性能低、通信复杂、双滚动条、弹窗无法全局覆盖,它的成长性不高, 只适合简单的页面渲染 注:个人觉得无论采用那种形式去解决,需要针对业务和整体团队技术项目未来规划来说,并不是说某种解决 方式不好,更多的解决形式依旧是要针对实际选择合适的 ~~~ [参看这里也给了更多的解决方向,'服务端模板构成'、'构建态集成'、'通过 iframe 在执行态集成'、'通过 JavaScript 在执行态集成'、'通过 Web 组件在执行态集成'](https://juejin.cn/post/6964219246528167966#heading-8) [实现微前端有哪些方案 ](https://juejin.cn/post/6844904162509979662#heading-8) [对比多种微前端方案](https://github.com/efoxTeam/emp/wiki/%E3%80%8A%E5%AF%B9%E6%AF%94%E5%A4%9A%E7%A7%8D%E5%BE%AE%E5%89%8D%E7%AB%AF%E6%96%B9%E6%A1%88%E3%80%8B) >[danger] ##### 本质 ~~~ 1.无论使用那种技术形式去实现本质想解决的例如下面几个问题 不同团队间开发同一个应用技术栈不同怎么破? 希望每个团队都可以独立开发,独立部署怎么破? 项目中还需要老的应用代码怎么破? 相对的这些解决方案整体相同的解决大体方向都是拆分,或者通过路由去对应加载对应拆分内容 ~~~ >[danger] ##### 微前端通俗易懂好文 [微前端究竟是什么,可以带来什么收益](https://juejin.cn/post/6893307922902679560) [# 微前端-最容易看懂的微前端知识](https://juejin.cn/post/6844904162509979662#heading-0) >[info] ##### 微前端 好文探讨 [# qiankun 技术圆桌](https://www.yuque.com/kuitos/gky7yw/gesexv) >[danger] ##### 整体总结 [微前端学习系列(一):微前端介绍 ](https://juejin.cn/post/6955341801381167112/) [每日优鲜供应链前端团队微前端改造 ](https://juejin.cn/post/6844903943873675271)