使用 Angular 打造微前端架构的 ToB 企业级应用

这篇文章其实已经准备了11个月了，因为虽然我们年初就开始使用 Angular 的微前端架构，但是产品一直没有正式发布，无法通过生产环境实践验证可行性，11月16日我们的产品正式灰度发布，所以是时候分享一下我们在使用 Angular 微前端这条路上的心得（踩过的坑）了额，希望和 Angular 社区一起成长一起进步，如果你对微前端有一定的了解并且已经在项目中尝试了可以忽略前面的章节。

什么是微前端

微前端这个词这两年很频繁的出现在大家的视野中，最早提出这个概念的应该是在 ThoughtWork 的技术雷达，主要是把微服务的概念引入到了前端，让前端的多个模块或者应用解耦，做到让前端的子模块独立仓储，独立运行，独立部署。

那么微前端和微服务到底有什么区别呢？

下面这张图是微服务的示意图，微服务主要是业务模块按照一定的规则拆分，独立开发，独立部署，部署后通过 Nginx 做路由转发，微服务的难点是需要考虑多个模块之间如何调用的问题，以及鉴权，日志，甚至加入网关层

对于微服务来说，模块分开解藕基本就完事了，但是微前端不一样，前端应用在运行时却是一个整体，需要聚合，甚至还需要交互，通信。

为什么需要微前端（Micro Front-end）

1. 系统模块增多，单体应用变得臃肿，开发效率低下，构建速度变慢；
2. 人员扩大，需要多个前端团队独立开发，独立部署，如果都在一个仓储中开发会带来一些列问题；
3. 解决遗留系统，新模块需要使用最新的框架和技术，旧系统还继续使用。

微前端的几种方案对比

方式	描述	优点	缺点	难度系数
路由转发	路由转发严格意义上不属于微前端，多个子模块之间共享一个导航即可	简单，易实现	体验不好，切换应用整个页面刷新