复杂 APP 构架
挑战:跨部门,跨技术,项目拆分
最佳方案实现独立运行、独立开发、独立部署,也叫微前端
方案:
iframe
- 使用全局组件(e.g: 模态弹窗)难度大 // 包括 url
- 容易独立调试,发布
- 可能依赖"第三方 cookie"未被禁用
- 重复的依赖
- 占用的资源可以卸载
- 需要额外的域名或路由配置
- 不能支持 SEO
web component
- 宿主环境需要实现加载方式,解决缓存引入等问题
- 重复的依赖 // 看部署方式
- 自定义元素重复风险 // 元素名称带版本号
- Error 只能通过宿主环境处理
- 不能支持 SEO
react/vue app
- 宿主环境需要实现加载方式,解决缓存引入等问题
- 重复的依赖 // 看部署方式
- Error 只能通过宿主环境处理
- 脚本/样式可能影响宿主环境
模块化宿主环境
- 客户端渲染 SPA
- 以公共模块的方式在主体项目中引用
- 一级路由之间的跳转是传统的页面跳转
- 有微服务的好处
- 以模块的方式引用主体
- 开发时看不到宿主环境
- 在主体项目中需要主动向宿主注册自己
- 服务端模板渲染的传统页面