微前端(一):微前端的出现

简介: 微前端(一):微前端的出现

最近入职新公司,在了解公司项目架构时,引发了一些思考,因为项目产品是一个Devops平台,而项目中使用了微前端的实现方式,因此将了解过程中引发的一些思考记录下来。

前端架构--从入门到微前端中提及了下面的问题:

  • 1.和业务关系不大、相同部分如何抽离+维护?
  • 2.业务相关的内容,相同部分如何抽离+维护? 当业务关系不大,可以从组件库重手:
  • 第一阶段:从项目中抽离了组件库和图表库(两个独立工程、项目中通过 git subtree引用)
  • 第二阶段:对 charts、components 按照组件思路进行改造(merge + extend + template)
  • 第三阶段:建立 Demo 站,为 charts、components 提供开发和展示环境(无特殊诉求无需查看源码)
  • 第四阶段:抽离 charts、components 共同的 utils(独立仓库 git subtree 引用)
  • 第五阶段:通过 yarn workspace 来处理公共依赖(关键点)
  • 第六阶段:解决 charts、components、utils 多仓提交的问题(monorepo) 对于业务相关内容: 可以用微前端

微前端:在页面不刷新的情况下,同一个页面可使用不同的框架,这些不同的框架实现的前端应用可以独立部署。

微前端的演变:

  • 1.iframe方案
  • 2.single-spa方案

iframe方案

对于iframe方案,其实就是通过iframe标签在一个页面里嵌套了另一个页面,不过它有一定的弊端:

  • 路由限制:在iframe内的页面里切换路由后,无法跟随浏览器进行前进后退
  • 资源加载:每次iframe的页面都需要重新加载
  • 资源共享:与外层的父组件隔离,无法实现状态共享
  • dom结构不共享:iframe里的全局modal框也是显示在iframe里

single-spa

single-spa方案解决了iframe方案的弊端。single-spa官网

精读《Monorepo 的优势》



相关文章
|
3月前
|
前端开发 JavaScript 开发者
【开启微前端新时代】微前端:构建可扩展、可维护的现代 Web 应用
【开启微前端新时代】微前端:构建可扩展、可维护的现代 Web 应用
|
3月前
|
前端开发 JavaScript API
微前端:一种新型的前端架构方法
微前端:一种新型的前端架构方法
201 0
|
监控 前端开发 JavaScript
带你入门前端工程(十一):微前端(下)
带你入门前端工程(十一):微前端(下)
128 0
|
9天前
|
前端开发 持续交付 开发者
探索现代前端开发中的微前端架构
微前端架构作为一种新兴的前端开发模式,旨在解决传统单体前端应用在可维护性和可扩展性方面的挑战。本文将深入探讨微前端的基本概念、实施方式以及其在提升团队协作效率和应用灵活性方面的优势。同时,我们还将探讨微前端架构的实现细节和常见的技术选型,以帮助开发者在实际项目中成功应用这一理念。
|
2月前
|
前端开发 UED
前端开发新趋势:响应式设计与微前端架构的崛起
【6月更文挑战第26天】响应式设计适应多设备需求,通过弹性布局和媒体查询确保跨平台优化体验。微前端架构则将复杂应用拆分成独立模块,实现独立开发部署,增强技术栈灵活性和系统容错性,两者共同推动前端开发效率与用户体验提升。
|
3月前
|
运维 前端开发 JavaScript
第二章(概念篇) 微前端与单体前端对比
第二章(概念篇) 微前端与单体前端对比
|
3月前
|
前端开发 JavaScript 开发者
探索前端领域中的微前端架构
随着前端应用的规模不断增长,传统的单体应用架构已经无法满足需求。本文将深入探讨微前端架构的概念、优势以及实现方式,为前端开发者提供新的思路和解决方案。
|
前端开发 JavaScript API
带你入门前端工程(十一):微前端(上)
带你入门前端工程(十一):微前端
87 0
|
3月前
|
移动开发 缓存 前端开发
面试官为什么我推荐微前端作为前端面试的亮点?
面试官为什么我推荐微前端作为前端面试的亮点?
|
缓存 前端开发 JavaScript
作为面试官,为什么我推荐微前端作为前端面试的亮点?-3
说说qiankun的资源加载机制(import-html-entry) qiankun import-html-entry 是qiankun 框架中用于加载子应用的 HTML 入口文件的工具函数。它提供了一种方便的方式来动态加载和解析子应用的 HTML 入口文件,并返回一个可以加载子应用的 JavaScript 模块
229 0