系统现状
- 巨石应用(Monolithic-Applications)
- 开发体验(开发仓单的真实体验)
- 启动慢 - 👀 首次启动(无缓存的冷启动)要3~6分钟,二次启动(有缓存的热启动) 1 分钟,修改代码后的热更新 HMR 5~10s。
- 构建慢 - 在等待构建的时间中虚度生命?🤦♂️ 构建一次 10~20 分钟?
- 热更新 - JSX 刷新有问题?!template 未更新?!再刷新。emmm... 为什么?
- 用户体验 - 举个例子,刷新一下浏览器查看枚举值(页面打开速度)要 8~10s。我不想再等了 🤷♂️...
- 维护体验 - 好多代码,好多组件,好多依赖, emmm...
- 技术栈 - Vue + VueRouter + Vuex + ElementUI + axios
- 依赖耦合 - 究竟是谁依赖了谁?不知道,不想查,不用管。因为项目前身已经被拆分,所以依赖关系还算好找。
- 使用
@
作为项目 src/* 别名,find @\\/ in ./src/modules
- 使用
@name
作为模块 src/modules/name 别名
- 跨团队开发 - 协同/沟通/开发成本,我们团队怎么做?(@wangquanming296)
- 熟悉组件和其 API
- 编写 README.md
- 编写 component demo 页面
- 开发业务组件并集成到 usage examples 到 components demo 页面供开发参考
解决方案
使用微前端技术分拆应用,以解决上述问题(为什么能解决,原因在微前端的优点中会一一提到)。
理想目标
微前端的定义
Micro frontends
![《什么是微前端》](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b44cca41-b2a3-46c8-bbc4-b5dc9e69847e/Untitled.png)
《什么是微前端》
微前端是一种应用架构,通过拆分应用、远程加载应用(通过组件/模块/包的运行时加载)达到团队/工程/应用解藕的目的以实现独立开发、独立部署。