概述

传统的中后台项目在前端开发时，常常会面临项目复杂度高、团队协作开发难度大、技术栈多样、 客制化 开发困难、第三方系统集成困难、应用性能差等问题。

为了有效解决这些问题，HZERO平台推出了HZEROJS前端框架，该框架集成了qiankun 、iframe、 Module Federation 多套微前端方案的能力，具有以下优点：

1. 项目复杂度降低： 支持将系统模块、组件、页面拆分成更小的部分，提升应用的可维护性和可扩展性。

2. 团队协作提升: 支持每个团队都可以有自己的开发方式和风格，可以独立部署测试。

3. 多技术栈开发： 打破了技术栈限制瓶颈，各个团队可以选择熟悉的技术栈进行应用模块开发。

4. 客制化能力增强： 支持更多、更灵活的API钩子，可以满足不同团队对系统的个性化需求。

5. 三方系统集成容易： 支持通过qiankun或iframe 的方式接入第三方系统到HZERO平台。

HZEROJS微前端能力已在HZERO体系下的多个项目中得到落地，以下是一些实际项目中的应用场景。

场景一 多团队协作研发

场景说明

HZERO平台包含多个子系统，其中工作流、飞搭都是比较大的模块，需要不同的研发团队进行独立开发和维护，如果按照传统的开发方式，每个团队的协作效率会特别低。通过HZEROJS提供的微前端方式可以很方便的把不同的子模块拆出去，这样各团队就可以及时响应用户需求的变化，并快速推出新版本的应用。

结果展示

HZERO 在 https://hzeronf.sass.hand-china.com/* 上有一个 host 应用，并且在 https://hzero-test.open.hand-china.com/* 上有多个子应用。子应用程序也挂载在 host 域上，因此可以直接通过 host 的域名访问对应的子模块资源。

场景二 多技术栈开发

场景说明

HZERO平台的主流技术栈是REACT，但是通常会有客户和其它团队想要用不同的技术栈进行开发，比如VUE。传统的开发方式，很难支持在一个系统中同时运用多种技术栈。HZEROJS支持以简单配置的方式快速集成VUE技术栈进行页面开发。

结果展示

HZERO平台引入VUE框架进行页面开发，与平台的路由进行融合，对于用户来说基本是无感知的。

场景三 客制化悬浮球

场景说明

HZERO平台有一个内置的悬浮球控件，但是有不少项目对悬浮球功能想要进行完全的自定义，甚至新增一个悬浮球，在以前的开发方式中，是很难快速支持的。通过HZEROJS提供的联邦组件和配置可以很容易实现对应的 客制化需求。

结果展示

可以看到我们很容易就客制化了一个新的悬浮球出来。

场景四 集成第三方系统

场景说明

某客户项目需要在HZERO平台中集成一个独立的第三方系统，通常我们会采用内嵌iframe的方式来实现对应的需求。HZEROJS除了对iframe做了深度支持外，还接入了qiankun方案，通过qiankun配置也可以很容易的接入一个子系统到平台中来。

结果展示

HZERO作为主应用，UMI子模块作为从应用，在HZERO平台中可以直接点击对应路径，进入UMI子模块的页面。

结语

利用HZEROJS提供的微前端技术，将系统合理拆分，不仅可以显著提高开发和维护效率，还能大幅提升系统性能和响应速度。这使得企业级应用能够更有效地应对需求变化和挑战。

联系我们

以上就是 HZEROJS 微前端能力的基本介绍，具体操作步骤和更多资料请通过 HZEROJS-微前端专题 进行查看。

如果您有对应的需求和建议，可以通过 开放平台 进行工单反馈，问题分类请选择【前端组件库/HZEROJS】。