开源公告 | hel-micro-工具链无关的微模块方案

7c83980b566833492c6f107634662fd8.gif

9fe4caa6ac16171659c1c02abbcc12f2.png

1、项目简介

hel-micro 是业内首个以sdk的方式支持模块联邦技术的方案,它脱离了工具链的枷锁,回归到js语言本身,接入快速、简单、灵活,极大的降低了模块联邦技术的接入门槛,让不同工具链间的联邦模块可以互认互通,提高了模块的流通。

022033dde50f7421a5167d25e1aeb178.png

独创的双构建机制,让远程模块的开发体验等效于本地模块

82cab82fbc081203d0659328319b20a8.png

运行时模块聚合让线上动态更新易如反掌,也可以按需定制不同场景的版本下发规则

c1f4bc05ed59eb1525021f7e021a834b.gif

cf8d788c9ecc654ee0b015f5b0dd2605.png

2、诞生背景

前端开发进入工程化、模块化、组件化开发时代,多人、跨团队共同协作开发一个项目已成为常态,项目规模庞大到一定程度时会遇到以下问题:

●  项目引入的第三方模块越来越多,导致包体构建速度越来越慢;

●  一些基础业务模块抽象到npm提供给其他项目复用后,一旦有功能优化或问题修复,需要推动使用方主动更新;

针对此痛点社区提出了模块联邦技术方案,将成为未来的主流开发趋势,它最大的优势不参与主项目编译,降低主项目包体积,提高编译速度,并让模块引入方可以做线上动态更新,完美解决了上述两大痛点,目前社区实现模块联邦的头部玩家是 webpack5 推出的 ModuleFederation 特性来支持,以及vite社区的强势追随者 vite-federation-plugin,但他们都是以构建工具链支持的方式支持,意味着主项目和子项目间必须工具链统一,否则彼此之间模块不能互认(例如主项目是webpack5,子项目是webpack4, 例如主项目是vite,子项目是webpack、parcel等其他)。

为了转移这些本不该让开发承担的额外迁移成本,hel-micro 提出了模块联邦联邦sdk化的架构理念并成功将其实现。

c67fb0fda41872e6995eb69e8a36d304.png

5f3e2e1c7b1e72d0e0429612631162fa.png

3、特性优势

相比社区已有方案,hel-micro 优势如下:

d14330268b4f172d61632293744d10e9.png

基于 sdk 的远程加载能力,我们可以搭配公共cdn部署远程模块(sdk默认指向unpkg),用户也可以轻松定制自己的模块管控平台,然后重置sdk的请求模块元数据接口即可。

ac75bd71a18330650e27cc0aa72c1e9e.png

再结合用户自己的cd&cd 流水线,可完成模块从提交、发布、到运维的全生命周期管理的闭环

c312bb707c808995da13897d2aff250c.png

进而可以搭建出一个类似如下架构 helpack 的模块管控平台了

329d985b7a3678fba4a59e1c480d2e6a.png

490a5bbd11b13918122619f757cd8909.png

4、开源规划

开源只是开始,基于核心层提供的远程加载能力

8505b8551a7f85f3d148b7ad9b37b4af.png

我们规划未来实现更多的上层框架远程加载适配器,例如

● 远程 web component 组件

● 远程 angular组件

● 远程vue组件

● 远程react组件(已实现为hel-micro-react,提供钩子函数加载远程react组件)

● 远程 svelte 组件 等....

同时我们后续很快很提供一个基于`hel-micro` + `react` + `pnpm` 的微前端应用示范`helra`.

`helra`将提供以下特性:

1 子应用独立部署,独立发布,由一级路由命中访问

2 共享基座上下文,可在一级路由下独立注册自己的子路由

3 应用本地启动自带基座,发布后基座运行时自动移除

4 应用间可相互共享组件,享受动态更新优势

5 所有应用均可访问更底层的远程公告库,

6 开发时应用间可以相互联调对方的代码

f8983072e710a5e4bcf749fe194a65eb.png

欢迎访问我们的仓库:https://github.com/Tencent/hel并一同参与建设 hel-micro 相关生态。

请给项目 一个 Star !

欢迎提出你的 issue 和 PR!

关注腾讯开源公众号

获取更多最新腾讯官方开源信息!

7dff3b426f657cab534875506959bf01.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值