引言

門户自定義組件是零衍門户的核心能力之一，基於這項能力，客户可以更靈活、自由地構建出多種風格的門户。然而隨着零衍門户被越來越多的企業使用，傳統門户自定義開發模式存在的一些問題也逐漸顯現，比如開發調試流程繁瑣、渲染性能較差等成為了用户使用過程中的痛點。

為解決上述問題，零衍經過探索與研究，推出了新的門户自定義組件開發模式——聯邦模式，全面提升了用户開發與使用體驗。

優勢與亮點

◆ 快速編譯，輕鬆集成：

依託於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', //  配置自定義門户組件
    },

◈ 配置完成後再整體啓動前端工程訪問門户地址即可實時預覽與調試門户自定義組件內容

上傳與配置

經過調試之後就可以將該組件上傳到零衍系統中供門户使用。如果是門户內部的自定義組件則在門户組件管理-自定義組件處理進行上傳發布；如果是自定義門户頁眉菜單則在登錄後門户管理-自定義頁眉菜單處進行配置。

• 注意：
  門户自定義功能仍保留對於傳統自定義組件開發模式的兼容，因此配置項中的自定義組件開發模式需要與組件實際開發模式保持一致！

聯繫我們

門户自定義組件功能對於聯邦模式的支持是零衍在提升開發者體驗道路上邁出的堅實一步，門户的搭建與使用都變得更加便捷、高效，大家快來試用吧！

零衍致力於系統管理降本增效，讓系統管理變得更簡單。歡迎聯繫零衍運營人員申請試用~

• 操作手冊：
  漢得焱牛開放平台
  文檔>技術產品>零衍系統管理平台KINGPAAS
• 聯繫郵箱：
  openhand@vip.hand-china.com

試用零衍管理平台期間，若您有任何問題需要諮詢，都可前往焱牛開放平台（open.hand-china.com）提反饋，或將疑問發往聯繫郵箱，我們有專業人員針對您的問題進行解決回覆，有技術精良的研發團隊根據您的反饋進行應用優化。期待您的反饋，我們將用心對待每一份迴應。