零衍门户组件联邦模式：重新定义组件开发新体验！

HAND汉得
61 阅读4分钟

引言

门户自定义组件是零衍门户的核心能力之一，基于这项能力，客户可以更灵活、自由地构建出多种风格的门户。然而随着零衍门户被越来越多的企业使用，传统门户自定义开发模式存在的一些问题也逐渐显现，比如开发调试流程繁琐、渲染性能较差等成为了用户使用过程中的痛点。

为解决上述问题，零衍经过探索与研究，推出了新的门户自定义组件开发模式——联邦模式，全面提升了用户开发与使用体验。

优势与亮点

◆ 快速编译，轻松集成：

依托于Webpack5与HzeroJs的支持，联邦模式下自定义组件构建编译更快，并且能更加轻松地集成Hzero通用工具与组件，极大地提升了开发体验。

◆ 便捷调试，降低负担：

经过零衍的适配，在联邦模式下，可直接启动本地前端工程进行自定义组件的调试与修改，告别之前自定义组件调试需要开发-打包-上传-预览的繁琐流程，极大地降低了开发者的负担。

◆ 性能提升，加快渲染：

联邦模式产出的自定义组件的构建产物体积得到了有效的压缩，从而使得自定义组件在零衍门户中能够更快速的完成渲染。

场景案例

我们以下图这样一个自定义组件为例，分别使用传统模式和联邦模式进行开发，比较了在开发构建过程中的差异。

经多次试验对比，结果如下表所示，使用联邦模式开发门户自定义组件各方面性能均大幅度优于使用传统组件开发模式。

前置配置

由于联邦模式的特性，对上传后自定义组件的名称有一定的要求，所以需要对文件上传配置进行一定的前置处理。

◈ 首先，我们需要在后台信息配置菜单下新增或编辑配置项 hskp.mgmt.customComponentStorageCode 将其配置为 HSKP-CUSTOM-FILE

◈ 然后在文件存储配置中需要同步新增对应的存储编码配置，注意将文件名前缀策略改为“无”

开发与调试

◈ 在进行开发调试时，我们需要在前端工程下通过以下命令启动联邦组件的本地服务

npx umi hb-smfc @/components/TestCmp --dev

◈ 在前端工程的config.ts配置环境变量并将上面的本地服务地址配置到对应的配置项中

  // 配置环境变量
  define: {
    'process.env': {
      CUSTOM_PORTAL_HOST: 'http://localhost:8000/remoteEntry.js',   //  配置自定义门户页眉与菜单
      CUSTOM_COMPONENT_HOST: 'http://localhost:8001/remoteEntry.js', //  配置自定义门户组件
    },

◈ 配置完成后再整体启动前端工程访问门户地址即可实时预览与调试门户自定义组件内容

上传与配置

经过调试之后就可以将该组件上传到零衍系统中供门户使用。如果是门户内部的自定义组件则在门户组件管理-自定义组件处理进行上传发布；如果是自定义门户页眉菜单则在登录后门户管理-自定义页眉菜单处进行配置。

  • 注意： 门户自定义功能仍保留对于传统自定义组件开发模式的兼容，因此配置项中的自定义组件开发模式需要与组件实际开发模式保持一致！

联系我们

门户自定义组件功能对于联邦模式的支持是零衍在提升开发者体验道路上迈出的坚实一步，门户的搭建与使用都变得更加便捷、高效，大家快来试用吧！

零衍致力于系统管理降本增效，让系统管理变得更简单。欢迎联系零衍运营人员申请试用~

试用零衍管理平台期间，若您有任何问题需要咨询，都可前往焱牛开放平台（open.hand-china.com）提反馈，或将疑问发往联系邮箱，我们有专业人员针对您的问题进行解决回复，有技术精良的研发团队根据您的反馈进行应用优化。期待您的反馈，我们将用心对待每一份回应。

avatar
文章
阅读
粉丝