首页  思维导图  详情



 



微前端

2021-02-25 17:26:43   0  举报





AI智能生成

微前端

模板推荐

作者其他创作

大纲/内容

what

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

核心价值

技术栈无关

主框架不限制接入应用的技术栈，微应用具备完全自主权

独立开发、独立部署

微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

增量升级

在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

独立运行时

每个微应用之间状态隔离，运行时状态不共享

why

系统模块增多，单体应用变得臃肿，开发效率低下，构建速度变慢；

人员扩大，需要多个前端团队独立开发，独立部署，如果都在一个仓储中开发会带来一些列问题；

解决遗留系统，新模块需要使用最新的框架和技术，旧系统还继续使用。

how

Nginx路由转发

通过Nginx配置反向代理来实现不同路径映射到不同应用

优点

简单，快速，易配置

缺点

在切换应用时会触发浏览器刷新，影响体验

iframe嵌套

父应用单独是一个页面，每个子应用嵌套一个iframe， 父子通信可采用postMessage或者contentWindow方式

优点

实现简单，子应用之间自带沙箱，天然隔离，互不影响

缺点

iframe的样式显示、兼容性等都具有局限性；太过简单而显得low

web components

每个子应用需要采用纯Web Components技术编写组件， 是一套全新的开发模式

优点

每个子应用拥有独立的script和css，也可单独部署

缺点

对于历史系统改造成本高，子应用通信较为复杂易踩坑

组合式应用路由分发

每个子应用独立构建和部署，运行时由父应用来进行路由管理， 应用加载，启动，卸载，以及通信机制

优点

纯前端改造，体验良好，可无感知切换，子应用相互隔离

缺点

需要设计和开发，由于父子应用处于同一页面运行，需要解决 子应用的样式冲突，变量对象污染，通信机制等技术点

 Collect

Get Started

微信数据标签

 Collect

Get Started

微前端Qiankun技术方案演进路线

 Collect

Get Started

前端

 Collect

Get Started

前端





0 条评论

下一页