从零打造微前端框架：实战“汽车资讯平台”项目（完结）

获课：jzit.top/1900/

有哪些主流的微前端框架？

以下为你介绍一些主流的微前端框架：

国内框架

• qiankun
• 简介：阿里开源的微前端框架，基于 single - spa 封装，为开发者提供了开箱即用的 API。
• 特点：技术栈无关，任意框架的应用都能接入；采用 HTML Entry 接入方式，让微应用的接入变得简单；具备样式隔离和 JS 沙箱，可保证应用间样式和全局变量、事件不冲突；支持资源预加载，能加快微应用的打开速度。
• 适用场景：适用于需要整合多种技术栈微应用的大型项目，比如电商平台、企业级管理系统等。在 “汽车资讯平台” 项目中，若要将不同技术栈开发的汽车资讯展示、用户评论、车型对比等模块整合在一起，qiankun 是不错的选择。
• micro - app
• 简介：基于类 WebComponent 进行渲染，从组件化思维出发实现微前端。
• 特点：接入成本低，与技术栈无关，不与业务绑定；提供了 js 沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等完善的功能；子应用改动量小。
• 适用场景：适合希望以较低成本接入微前端，且对组件化和隔离性有需求的项目。在汽车资讯平台中，若要快速集成一些已有的小型汽车资讯子应用，micro - app 较为合适。
• EMP
• 简介：基于 Webpack5 的 Module Federation 实现的微前端框架。
• 特点：可共享第三方依赖，减少代码引入；微应用独立部署运行，通过 CDN 引入主程序，部署一次可被多个应用使用；能动态更新微应用，代码变动无需重新打包发布整合应用；去中心化，微应用间可相互引入；支持跨技术栈组件式调用；可按需加载；应用间通信便捷，可状态共享；能生成对应技术栈模板，搭建开发环境便捷。
• 适用场景：适用于对应用间通信和资源共享要求较高，且希望实现动态更新的项目。在汽车资讯平台中，若要实时更新车型数据、新闻资讯等内容，EMP 能发挥较好的作用。

国外框架

• single - spa
• 简介：最早出现的微前端框架，是一个用于前端微服务化的 JavaScript 前端解决方案。
• 特点：是一个底层的微前端基础库，技术栈无关，可以在项目中使用多种前端框架（如 React、Vue、Angular 等）；提供了应用的注册、生命周期管理等核心功能，开发者可以基于它进行定制化开发。
• 适用场景：适合有一定开发能力，希望根据自身需求定制微前端架构的团队。在汽车资讯平台开发中，如果团队希望深度定制微前端的运行机制和交互逻辑，single - spa 可以作为基础框架。
• Module Federation（Webpack 5 内置）
• 简介：Webpack 5 引入的一个新特性，它允许在不同的构建之间共享代码，实现微前端架构。
• 特点：能够在运行时动态加载远程模块，实现模块的共享和复用；可以实现不同项目之间的代码共享，减少重复打包；支持跨技术栈的模块集成。
• 适用场景：适用于已经使用 Webpack 5 进行项目构建的团队，希望利用 Webpack 的生态和功能来实现微前端。在汽车资讯平台中，如果项目原本就使用 Webpack 5 构建，那么可以考虑使用 Module Federation 来实现微前端架构。