微前端架构就是将一个大型前端应用拆分成多个小的前端应用,每个应用都有自己独立的技术栈,独立开发和部署,最后通过一定的机制组合成完整的应用。
设计与实施
- 技术栈选型:每个微应用可以选择自己的技术栈,如React、Vue或Angular等。
- 开发环境:每个微应用都有自己独立的开发环境,独立编译和打包。
- 构建流程:利用Webpack 5的Module Federation或复用插件进行微应用构建。构建后输出到不同的bundle文件中。
- 部署方式:每个微应用都可以独立部署,或利用Server Side Rendering Server进行组合部署。
- 通信机制:微应用间可以通过消息机制或Redux等状态管理方案进行通信。
- 页面组合:在入口应用中,采用
// React微应用
const ReactMicroApp = () => <h1>React App</h1>
// Vue微应用
const VueMicroApp = {
template: '<h1>Vue App</h1>'
}
// 入口应用
<div id="react">
<script src="react.bundle.js"></script>
</div>
<div id="vue">
<script src="vue.bundle.js"></script>
</div>优缺点
优点:
- 技术栈灵活:每个微应用可以选择自己的技术栈,无需统一。
- 独立开发:微应用可以由不同的团队独立开发,减少协作难度。
- 可插拔:可以很容易添加或删除一个微应用。
- 更快的构建:修改一个微应用只需要重新构建自己的代码,加速开发周期。
缺点: - 复杂度提高:项目整体变得比较复杂,各微应用的协调及通信需要解决。
- 性能损耗:多次加载不同的bundle会对性能产生影响,需要代码分割等优化。
- 部署依赖:微应用之间存在依赖,部署顺序需要考虑,会增加部署的难度。
- 学习成本:微前端架构的理解和实践还需要一定的学习与实践。
所以,微前端架构通过拆分大型应用,实现各个领域的高内聚,是解决大前端应用复杂性的一种趋势。但也带来一定的复杂度和性能损耗,需要在设计和实施时确保微应用的高内聚与低耦合,减少不必要的依赖,才能发挥其最大价值。
当前比较主流的微前端框架有:
- Single-SPA:是一个前端路由器,支持在一个页面加载多个框架(React、Angular、Vue等)。
- Omi:Omi 采用 Web Components 标准,支持框架无关的 Web 组件开发,适配微前端场景。
- Qiankun:一个基于 single-spa 的实现,支持多框架下的微前端解决方案,提供丰富的生态系统。
- Megalo:手机淘宝开源的一个基于 Vue 的微前端方案,具有高性能、代码隔离等特点。
- MicroApp:由京东开源,一个面向企业级产品的 Vue 组件库与微前端框架。
以 Qiankun 为例,它具有以下主要特征: - 采用 Proxy 代理或 iframe 解决 style/css 隔离问题。
- 支持基于 single-spa 的主应用 + 微应用模式,提供 registerMicroApps API 进行微应用注册。
- 支持微应用的按需加载、预加载和预缓存。
- 提供 genActiveRule 生成微应用激活规则的工具方法。
- 支持微应用之间的通信方案,如 initGlobalState、onGlobalStateChange 等 API。
- 天然兼容主流框架(React、Vue 和 Angular),易于迁移既有应用。
- 提供丰富的 loader 以支持 TypeScript 等,内置完备的 typings 定义。
它的基本工作原理是: - 主应用注册微应用并提供生命周期管理。
- 主应用控制微应用的加载和卸载。
- 主应用提供通信机制,微应用之间可以传递消息或同步状态。
- 微应用注入到主应用时,样式和 DOM 会受 Proxy 管理以实现隔离。
- 主应用负责微应用的预加载和预缓存优化。
所以, Qiankun 作为一个比较完备的微前端框架解决方案,通过Proxy和single-spa实现微应用的加载、通信、样式隔离和预加载等功能,值得在实施微前端架构时考虑和学习借鉴。
总的来说,微前端框架的主要目的是通过某种机制将多个独立的微前端应用在一定程度上组合成一个完整的应用,同时又确保微应用的高内聚。所以在选型和实践时,要考虑它们在性能、语言融合、状态管理和构建部署等方面是否易于实现和管理。
Single-SPA
优点:
- 框架无关,支持多框架微前端。
- 易于实现路由和状态管理。
- 生态完善,有大量示例和文档。
缺点: - 需要自己实现样式隔离方案。
- 需要使用 iframe 方案载入微应用,会对性能有一定影响。
- 微应用迁移成本较大,需要改造现有应用。
Omi
优点:
- 采用Web Components标准,实现真正意义上的框架无关。
- 无需 iframe,性能好。
- 易于实现样式隔离。
缺点: - 生态还在发展,文档和示例相对较少。
- 状态管理和路由方案需要自己实现。
- 迁移React或Vue应用难度较大。
Qiankun
优点:
- 基于single-spa,易于实现路由和状态管理。
- 采用Proxy方案,解决样式隔离并保证性能。
- 天然支持React、Vue和Angular,迁移成本低。
缺点: - 还未完全成熟稳定,存在一定兼容性问题。
- 需引入qiankun和single-spa运行时,增加包体积。
- 微应用需要按qiankun的规范进行开发。
Megalo
优点:
- 面向Vue开发,文档和生态体系完善。
- 高性能,采用Proxy实现样式隔离。
- 支持TypeScript,开发体验好。
缺点: - 仅支持Vue微应用,不够框架无关。
- 状态管理和路由方案固定,灵活性稍差。
- 只适用于Vue架构的系统,扩展性受到一定限制。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
