实施微前端的路由分发式微前端 微前端的原理

路由分发式微前端，即通过路由将不同的业务分发到不同的、独立前端应用上。其通常可以通过 HTTP 服务器的反向代理来实现，又或者是应用框架自带的路由来解决。就当前而言，通过路由分发式的微前端架构应该是采用最多、最易采用的 “微前端” 方案。但是这种方式看上去更像是多个前端应用的聚合，即我们只是将这些不同的前端应用拼凑到一起，使他们看起来像是一个完整的整体。但是它们并不是，每次用户从 A 应用到 B 应用的时候，往往需要刷新一下页面。

在几年前的一个项目里，我们当时正在进行遗留系统重写。我们制定了一个迁移计划：首先，使用静态网站生成动态生成首页；其次，使用 React 计划栈重构详情页；最后，替换搜索结果页整个系统并不是一次性迁移过去，而是一步步往下进行。因此在完成不同的步骤时，我们就需要上线这个功能，于是就需要使用 Nginx 来进行路由分发。如下是一个基于路由分发的 Nginx 配置示例：

在这个示例里，不同的页面的请求被分发到不同的服务器上。随后，我们在别的项目上也使用了类似的方式，其主要原因是：跨团队的协作。当团队达到一定规模的时候，我们不得不面对这个问题。除此，还有 Angluar 跳崖式升级的问题。于是，在这种情况下，用户前台使用 Angular 重写，后台继续使用 Angular.js 等保持再有的技术栈。在不同的场景下，都有一些相似的技术决策。因此在这种情况下，它适用于以下场景：1、不同技术栈之间差异比较大，难以兼容、迁移、改造；2、项目不想花费大量的时间在这个系统的改造上；3、现有的系统在未来将会被取代；4、系统功能已经很完善，基本不会有新需求。而在满足上面场景的情况下，如果为了更好的用户体验，还可以采用 iframe 的方式来解决。