什么是微前端

随着业务的复杂程度越来越高,我们的项目也变的越来越大,越来越臃肿,达到一定程度以后,如果后期想要重构,那将是灾难级别的。而且技术随着不断的更新,以前的老项目使用的老旧的技术栈,项目更新新技术就只能从新开一个项目。

那么如何解决这样的问题呢?答案就是微前端。 那什么是微前端呢?

举个例子,我们有一个管理系统,里面有各种模块。我们可以按照业务拆分为多个系统进行开发。我们可以有一个主应用,然后把多个系统当成是子应用,独立开发,独立测试,独立部署,最后所有的子应用就承载到主应用上。

Untitled

假设我们的主应用部署到 https://main.app.com,有两个子应用分别部署到

那么在主应用中打开子应用是如何访问的呢?如这样的:

这样我们的三个应用都集中到了一个应用上,大家各自开发自己负责的项目,各自测试、部署自己的项目。

微前端如何加载子应用的呢?

flowchart LR
	
		用户输入url --> 访问域名下的index.html --> 加载主应用 --> 监听路由的变化 --> 匹配子应用路由 --> 加载子应用

需要先加载基座(主应用),再把选择权交给主应用,由主应用根据注册过的子应用来抉择加载谁,当子应用加载成功后,再由vue-router或react-router来根据路由渲染组件。

微前端的核心价值

微前端架构具备以下几个核心价值: