微前端规则

本文探讨了构建大型Web应用程序时采用微前端架构的经验和教训,强调了零耦合、独立部署、独立测试和版本控制的重要性。微前端应具有独立的代码库、CI/CD管道,并避免不必要的通信和全局状态。此外,提倡使用范围内的CSS和自治团队组织。每个微前端应能独立工作,允许未来升级或重写,确保灵活性和可扩展性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  

微前端规则

  我总是想知道大型Web应用程序是如何建造的!我发现了秘密的秘密,它成为我的激情。经历在规模上使用微型前端的优势和痛苦后,我决定记录这段旅程并分享一些“最佳实践”。

  这是在设计遵循微前端模式的应用程序时的最佳实践的自由练习列表。应检查每个“规则”,其福利/缺陷针对您的特定用例评估。

  微前端之间的零耦合

  为了实现这种架构的好处,应尽可能避免意外耦合;这将解锁微前端模式必须提供的灵活性和可扩展性以及通过允许占用申请部分的升级或将来的完整重写来替换您的应用程序的未来证明。

  每个微前端应该能够在隔离或容器应用中呈现。所需的数据应由每个微前端加载并避免数据瀑布。

  做:

  可以在不影响其他微前端的情况下交换的共享库。?加载所需的所有数据呈现。

  不要:

  在不同的微前端具有集中存储/共享数据。共享积极开发的库。单独的代码基础

  每个微前端都应具有自己的代码库,并且选择的版本控制不应对项目开发或部署的方式产生任何影响。在单一的单一或单独的存储库下拥有所有项目都很好。

  做:

  使用单一代码仓 monorepos。使用单个 repos。每个微前端应独立部署

  每个微型前端都有它自己的CI / CD管道,并且能够在没有其他微前端的任何依赖项的情况下部署到生产。应该避免的常见的反模式是“地狱的部署队列”,其中不同的微前端如此紧密地耦合,它们需要以特定顺序部署,以避免打破应用程序。

  做:

  具有单独的CI / CD管道。按需发布。

  不要:

  有发布时间表。具有允许以前版本的增量/顺序部署。微前端应独立测试

  因为需要单独的微前端以及容器应用程序内部呈现,因此还可以使用单位和整个方案的集成测试测试它们是有意义的。

  做:

  为隔离的每个微前端渲染具有单位和集成测试。在容器应用程序中运行微前端渲染的集成测试作为端到端测试的一部分。微前端应该是有版本的

  当一个新的微前端被部署到生产时,不应删除以前的版本,并且应该使用语义版本或类似的版本号标记新版本。由容器应用程序决定要使用(管理)的特定微前端或始终使用最新版本(Evergreen)的特定版本。

  做:

  使用语义版本化。使用特定版本或“最新”。

  不要:

  需要全局部署更改版本。删除以前的版本。最小的沟通

  微前端之间的通信应尽可能最小,简单,避免尽可能多的全球状态和框架特定的解决方案。

  如果两个或更多的微前端共享大量消息以提供其最小功能,它们可能太紧密耦合,并且它们可以共享类似的足够的目的,即它们应该被认为将它们集成到一个中。

  做:

  保持信息小而简单。如果可能的话,避免有状态和通信框架。

  不要:

  股东。有不必要的沟通。CSS应该是范围

  来自一个微前端的CSS不应影响其它微前端。

  做:

  为您的CSS定义范围。使用CSS-IN-JS或命名法库(如CSS模块)。

  不要:

  使用全局CSS。最终建议书尝试创建自治团队。尝试安排围绕业务功能的微前端。可重用性是一个很好的“副作用”而不是目标。不要强制这种架构风格,因为它是“新”。您不需要多个JavaScript框架。您不需要“微前端框架”。微前端不必是“Micro”。

 

### 微前端架构概述 微前端架构是一种将大型单页应用(SPA)拆分成更小、独立的应用程序的方法,这些小程序可以由不同的团队并行开发、部署和维护[^4]。 ### 微前端架构的实现方式 #### 1. 基于 URL 路径划分 通过配置服务器或代理规则,根据请求路径的不同加载相应的子应用。这种方式简单直观,易于理解和实施。 #### 2. 使用 iframe 容器技术 利用 HTML `<iframe>`标签嵌入各个子页面,在父级页面中定义好布局结构后,动态调整 iframe 的 src 属性指向目标子站地址。此法能较好地解决跨域资源访问问题,但存在性能开销较大等问题。 #### 3. 单 SPA (Single-SPA) single-spa 是一种流行的 JavaScript 库,它允许在一个浏览器窗口内运行多个前端应用程序,并让它们协同工作。每个子应用都是一个完整的 Webpack 构建项目,拥有自己的入口文件、构建工具链等设置。当用户导航到特定路由时,single-spa 可以按需懒加载对应的子应用模块[^2]。 ```javascript // main.js - Single-SPA Root Configuration Example import { registerApplication, start } from 'single-spa'; registerApplication( '@your-org/app-name', () => System.import('@your-org/app-name'), location => location.pathname.startsWith('/app-name') ); start(); ``` #### 4. Qiankun 框架 Qiankun 是 Ant Design Pro 团队开源的一个基于 single-spa 的微前端解决方案。除了支持上述特性外,还提供了更加便捷的操作 API 和丰富的插件生态体系,帮助开发者快速搭建起稳定的生产环境。 ### 应用场景 对于那些规模庞大、业务复杂的企业级网站来说,采用微前端架构有助于: - **提升协作效率**:不同小组专注于各自负责的功能区域; - **简化运维流程**:各部分可单独更新迭代而不影响整体稳定性; - **增强用户体验一致性**:即使是由多支队伍共同完成的产品也能保持统一的设计风格和技术栈[^3]; ### 最佳实践建议 为了充分发挥微前端的价值,在实际操作过程中应当注意以下几点: - 明确职责边界,合理规划子项目的范围大小; - 维护一套通用的基础库供所有参与者调用; - 制定清晰的数据交换协议确保信息流通顺畅无阻; - 加强自动化测试覆盖度保障质量稳定可靠; - 推动 DevOps 文化建设加速反馈循环周期缩短交付时间。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值