微前端到底是什么？

关注「前端向后」微信公众号，你将收获一系列「用心原创」的高质量技术文章，主题包括但不限于前端、Node.js以及服务端技术

本文首发于 ayqy.net ，原文链接：http://www.ayqy.net/blog/micro-frontends

一.简介

为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）：

微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来

具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理

然而，越来越重的前端工程也面临同样的问题，自然地想到了将微服务思想应用（照搬）到前端，于是有了*微前端（micro-frontends）*的概念：

Micro frontends, An architectural style where independently deliverable frontend applications are composed into a greater whole.

即，一种由独立交付的多个前端应用组成整体的架构风格。具体的，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品：

Decomposing frontend monoliths into smaller, simpler chunks that can be developed, tested and deployed independently, while still appearing to customers as a single cohesive product.

二.特点

简单来讲，微前端的理念类似于微服务：

In short, micro frontends are all about slicing up big and scary things into smaller, more manageable pieces, and then being explicit about the dependencies between them.

将庞大的整体拆成可控的小块，并明确它们之间的依赖关系。关键优势在于：

• 代码库更小，更内聚、可维护性更高

• 松耦合、自治的团队可扩展性更好

• 渐进地升级、更新甚至重写部分前端功能成为了可能

简单、松耦合的代码库

比起一整块的前端代码库，微前端架构下的代码库倾向于更小/简单、更容易开发

此外，更重要的是避免模块间不合理的隐式耦合造成的复杂度上升。通过界定清晰的应用边界来降低意外耦合的可能性，增加子应用间逻辑耦合的成本，促使开发者明确数据和事件在应用程序中的流向

增量升级

理想的代码自然是模块清晰、依赖明确、易于扩展、便于维护的……然而，实践中出于各式各样的原因：

• 历史项目，祖传代码

• 交付压力，当时求快

• 就近就熟，当时求稳……

总存在一些不那么理想的代码：

• 技术栈落后，甚至强行混用多种技术栈

• 耦合混乱，不敢动，牵一发何止动全身

• 重构不彻底，重构-烂尾，换个姿势重构-又烂尾……

而要对这些代码进行彻底重构的话，最大的问题是很难有充裕的资源去大刀阔斧地一步到位，在逐步重构的同时，既要确保中间版本能够平滑过