开源 | 携程度假零成本微前端框架-零界

作者简介

工业聚，携程高级前端开发专家，react-lite, react-imvc, farrow 等开源项目作者。

乐文，携程前端开发工程师，专注组件化开发、前端性能优化。

一、 前言

1.1  微前端的含义

在研发一个系统的初期，我们可以把所有代码放到一个项目中。随着企业的发展，业务逻辑越发复杂和专业化，又会细分出不同的研发团队，独立负责其中某一部分。

每个开发团队有他们各自的迭代节奏，很难在耦合的同一个项目中，满足所有团队的需求。我们很自然地会将整个系统拆解到多个子应用/子项目中，他们可以独立开发、独立部署，但共同协作支撑了系统的整体功能。

当上述系统拆解过程，发生在后端时，它被称之为——微服务；当它发生在前端时，则被称之为——微前端。

从某种意义上，微前端是默认值，不需要额外的努力。浏览器一开始就实现了通过超链接的方式，支持多个 HTML 页面之间跳转。

Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) in 1989, while working at CERN. The Web was originally conceived and developed to meet the demand for automated information-sharing between scientists in universities and institutes around the world.

1989年，英国科学家蒂姆-伯纳斯-李在欧洲核子研究中心工作时发明了万维网（WWW）。万维网最初是为了满足世界各地大学和研究所的科学家之间自动分享信息的需求而构思和开发的。

Web 自它被发明开始，就已经是一种服务于跨团队（不同大学、不同科学组织）之间的沟通与协作的信息技术。

但是，朴素的页面跳转，往往会在页面过渡阶段产生白屏，在体验上不能满足我们的需求。

因此，当我们说“微前端”时，我们想要达到的目标是：

• 不同的前端团队，可以独立开发和部署他们的应用，满足自己的迭代需求

• 多个前端子应用之间的协作与切换，不应该产生不可接受的用户体验下降

1.2  微前端的类型

我们可以把微前端按照其拆解的颗粒度，分成：

• 页面级微前端（page-level）：每个子应用独享一个页面，子应用之间的切换就是页面之间的跳转/切换。

• 区域级微前端（section-level）：在同一个页面中，存在两类区域：

    a. 共享区域，如顶部菜单栏、侧边栏等，由所有子应用共享。

    b. 切换区域，通常作为主体内容呈现，子应用在该区域做局部切换。

页面级微前端（page-level）是浏览器的默认功能，但体验不佳；因此，当前大部分微前端框架，致力于区域级微前端（section-level），代表框架有 Qiankun，Single-Spa 等。

区域级微前端的主要实现思路，可以粗略概括如下：

• 代理或劫持 window 环境，让多个子应用及其依赖的前端框架，可以互不干涉地独立运行

• 每个子应用注册了“创建”与“销毁”等生命周期，等待主应用根据 url 去驱动和调度它们

区域级微前端（section-level）可以很好地解决某一类微前端场景（如复杂的后台系统），子应用恰好拥有相同的界面风格，甚至相同的 Layout，如顶部菜单栏、侧边栏等模块，只有内容主体部分有差异。

然而，在另一些场景中，我们可能仍然需要页面级微前端（page-level）。

• 子应用之间拥有不同的 UI 风格，甚至不同的 Layout，它们之间的切换，就是整页