复杂 APP 构架

挑战：跨部门，跨技术，项目拆分

最佳方案实现独立运行、独立开发、独立部署，也叫微前端

https://mp.weixin.qq.com/s/GdxR_LFj6UqWB0Zi04UnDA

方案：

iframe

• 使用全局组件（e.g: 模态弹窗）难度大 // 包括 url
• 容易独立调试，发布
• 可能依赖“第三方 cookie”未被禁用
• 重复的依赖
• 占用的资源可以卸载
• 需要额外的域名或路由配置
• 不能支持 SEO

Custom Element

• 宿主环境需要实现加载方式，解决缓存引入等问题
• 重复的依赖 // 看部署方式
• 自定义元素重复风险 // 元素名称带版本号
• Error 只能通过宿主环境处理
• 不能支持 SEO

React/Vue App

• 宿主环境需要实现加载方式，解决缓存引入等问题
• 重复的依赖 // 看部署方式
• Error 只能通过宿主环境处理
• 脚本/样式可能影响宿主环境

模块化宿主环境

• 每个子 App 是客户端渲染 SPA
• 以公共模块的方式在主体项目中引用
• 一级路由之间的跳转是传统的页面跳转 // 可添加过渡动画
• 有微服务的好处
• 以模块的方式引用主体
• 开发时看不到宿主环境
• 在主体项目中需要主动向宿主注册自己
• 服务端模板渲染的传统页面