微前端

微前端

what

什么是微前端

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

核心价值

技术栈无关

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

独立开发、独立部署

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

增量升级

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

独立运行时

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

why

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

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

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

how

Nginx路由转发

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

优点

简单，快速，易配置

缺点

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

iframe嵌套

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

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

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

web components

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

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

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

组合式应用路由分发

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

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

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