导航
随着业务的复杂程度越来越高，我们的项目也变的越来越大，越来越臃肿，达到一定程度以后，如果后期想要重构，那将是灾难级别的。而且技术随着不断的更新，以前的老项目使用的老旧的技术栈，项目更新新技术就只能从新开一个项目。
那么如何解决这样的问题呢？答案就是微前端。 那什么是微前端呢？
举个例子，我们有一个管理系统，里面有各种模块。我们可以按照业务拆分为多个系统进行开发。我们可以有一个主应用，然后把多个系统当成是子应用，独立开发，独立测试，独立部署，最后所有的子应用就承载到主应用上。
假设我们的主应用部署到 https://main.app.com,有两个子应用分别部署到
https://a.app.comhttps://b.app.com那么在主应用中打开子应用是如何访问的呢？如这样的：
https://mian.app.com/ahttps://mian.app.com/b这样我们的三个应用都集中到了一个应用上，大家各自开发自己负责的项目，各自测试、部署自己的项目。
微前端如何加载子应用的呢？
flowchart LR
用户输入url --> 访问域名下的index.html --> 加载主应用 --> 监听路由的变化 --> 匹配子应用路由 --> 加载子应用
需要先加载基座（主应用），再把选择权交给主应用，由主应用根据注册过的子应用来抉择加载谁，当子应用加载成功后，再由vue-router或react-router来根据路由渲染组件。
微前端架构具备以下几个核心价值：
微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用。
| 解决方案 | 相对特点 | 缺点 |
|---|---|---|
| iframe | 天生隔离样式与脚本、多页 | 1. 不是单页应用，会导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用 |