微前端架构实战-001什么是微前端

前一段时间我遇到过这样一个问题，接到朋友邀请，帮忙解决一个问题， 几年前的一个不大不小的项目，他们使用的框架是当时看起来非常有前景的 Angular 框架，所有的业务也都跑在这个框架下，几年之后的今天，当时的业务已经处于低迷状态了，舍弃不太可能，而随着前端的发展，Angular 开发者在国内越来越难招，而如果将业务功能进行重构成本又太高，问我怎么办，我就建议他们使用微前端架构进行项目架构升级，我也有幸参与了项目的升级工作，赚了一顿啤酒小烧烤；

微前端这个概念，很多人应该都听过，但是真正实际上手做过的，少之又少，不是每个前端都有机会涉及到项目的架构设计，初级前端开发者很难接触到这样的工作内容，所以，我就结合这次的经验，来说一说目前微前端架构的设计理念和具体应用的实现方案；

第1章 微前端架构理念

1-1 什么是微前端

不管你对微前端有没有接触过，我先来问一个问题，你是如何实现多个应用之间的资源共享的？

比较多的处理方式是 npm包 方式抽离和引用，比如多个应用项目之间，可能有某业务逻辑模块或者其他是可复用的，便抽离出来以 npm 包的形式进行管理和使用。但这样却带来了以下几个问题：

发布效率低下：

如果需要迭代 npm 包内的逻辑业务，需要先发布 npm 包之后，然后在每个使用了该npm 包的应用中都更新一次 npm 包的版本，再各自构建发布，过程繁琐。如果涉及到的应用多的话，花费的人力和精力就更多了。

多团队协作容易不规范：

不同团队，或多或少的都存在不同的编码风格，我在项目中每引入一个 npm 包，就可能意味着引入了一种不同的编码方式，这样会让我们的项目杂乱无章，多个团队同时开发一个大型且复杂的产品，是一个非常棘手的问题；

微前端的概念，就是通过引入一种更加优雅的方式，来解决我们面临的这些问题，

其实，早在2016年，微前端概念就已经诞生了。

微前端概念官网：

Micro Frontends: https://micro-frontends.org/  

有这样一句话，阐述了对微前端概念的定义：

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.

https://micro-frontends.org/

从 Micro Frontends 官网可以了解到，微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍然聚合为一个产品出现在客户面前。你可以这样理解微前端，它是一种将多个可独立交付的小型前端应用聚合为一个整体的架构设计。

需要注意的是：

1：微前端不是一门具体的技术，而是整合了技术、策略和方法的架构理念，技术实现上可能会以脚手架、辅助插件和规范约束等等，以生态圈的形式展示出来，是一种宏观上的架构。这种架构目前有多种方案，都有利弊之处，一会我们会详细介绍

2：微前端并没有技术栈的约束。每一套微前端架构下的具体应用，都可能使用了不同的技术栈，你可以将 React 技术栈和 Vue 技术栈的项目整合成一个项目运行，也可以统一使用一种技术栈开发所有微前端架构下的应用；

说到底，微前端最大的价值就在于，可以帮助我们 拆分巨型应用，降低耦合度，使应用变得更加可维护，同时兼容历史应用，轻松实现增量开发