模块联邦之缘起
自谷歌 chrome 浏览器异军突起，并在 2008 年 9 月 2 号 正式官宣公布 v8 js 引擎之后，它以极高的运行效率席卷了网络世界，同时也捕捉了大量用户，这种不可阻挡的势头让其余各大科技公司（apple、moliza、microsoft）感触到了微小的杀气，随即大家都开始招兵买马、磨刀赫赫筹备杀出一条血路，从此 js 引擎进入了军备竞赛期间，这其中微软甚至不惜自废 IE 并开始力推背地携带了微软有数心血的全新 js 引擎 Chakra的 edge 浏览器，可想而知大家对 js 引擎这块蛋糕的器重水平有多高，而 v8 的诞生催化了大量的驰名开源作品，让 js 生态始终放弃着十分强劲的生机，这其中最驰名的就是 2009 年诞生的 nodejs，一个基于v8 的服务端 js 运行时，让 js 这门语言开始从前台到后盾遍地生花，以至于以下一句很早诞生的调侃话语至今还在流传：
Any application that can be written in JavaScript, willeventually be written in JavaScript.模块化标准
nodejs将 commonjs 模块化带到了服务器端，让大型 js 工程组织起来更加井井有条，同时也带了 npm 这个超级杀手锏，让模块散发与共享效率进步到了前所未有的高度。
而前端利用也随着网络应用的复杂度成倍晋升，导致进入代码体积进入了高速收缩期间，这个时候急需一个无效的模块化计划来解决如何优雅拆分模块，如何进步代码复用性和可维护性等一系列问题。
此时两大支流模块化计划 amd 和cmd开始在前端这里竞相角逐并最初各自站稳了一份很大的地盘，他们的代表实现别离是 requirejs 和seajs，置信不少小伙伴都理解或应用过。
工程化体系
只管 requirejs 和seajs为前端带来了模块化标准的实现并给大型 js 工程注入了巩固的根基，然而仅靠模块化标准，仍然不能解决如何和 npm 生态互通，如何治理日趋简单的模块依赖关系，如果兼容新的 js 个性等一系列问题，归根结底，这外面波及到一个关键词 工程化体系 ，之后webpack 和babel便诞生了，他们指标十分明确，解决了以下图中的 4 大问题
随即成为了前端开始工程化体系开发的事实上的基建标配。
webpack依附优良的插件和加载器机制，让其围绕它的生态得以不停地做大做强，干掉了过程其余更偏差于工具的 gulp，grunt 等一众对手
npm 的魔咒
webpack和 npm 简直造成了完满搭档的状态，但前端本来从 cdn 获取的资源改由打包工具合并到一个包体里带来了致命的更新和部署效率问题。
在某些须要须要动静更新的场景，这种 all in one 的打包机制让包体的部署效率大打折扣，这本不是 webpack 和npm的问题，而是人们天生对 web 环境须要疾速迭代、快递试验的高要求带来的典型场景需要。
注：externals 自身不能彻底解决动静更新的诉求，只适宜于将底层公关依赖包体外链到 cdn
bundless 来袭
同时 webpack 随着我的项目体积日趋宏大，新的问题诸如开发体验差（热更新慢）、包体加大、构建速度慢（node\_modules 黑洞）等问题也诞生了，此时新生代的开发工具 snow 和vite以不打包的名义开始鲸吞 webpack 的市场。
他们都利用了浏览器的原生模块化能力 esm，跳过webpack 的须要的依赖剖析和打包流程，在此设计下做到了毫秒级的调试启动。
但它们带来的极致快体验并不能波动整个 webpack 生态的深厚围城，事实上大家都是处于调试基于 vite 而生产打包还是用 webpack 的双擎驱动模式，毕竟 esm 遍及还须要工夫。
模块联邦吹响反攻号角
既然大家都吐槽 wepack 构建慢，那么可不可以有一种形式既能跳过构建步骤又能让用户能够按本人的形式组合多层次依赖模块呢？
当然有的，那就是走 预构建 这条路线
模块联邦 因而诞生了，它的平凡之处在于放弃以后前端开发模块化、组件化、工程化的高效率体系下，容许模块独立开发、独立部署，通过 CDN 间接共享，从而挣脱 npm 包体无奈动静更新的枷锁，从而推动整个前端界开发和运行体验回升到一个新高度。
只有有越多的模块能晋升到联邦里，本地启动速度将越快！
而且联邦模块天生具备双重身份，即能够是模块消费者，也能够是模块提供者，这让模块联邦利用造成了天壤的网站关系，模块散发效率、部署效率、共享效率都失去了前所未有的晋升！
模块联邦的阿喀琉斯之踵
webpack 5或者其余工具带来的模块联邦实现真的完满了吗？它确实解决了 免构建 、 动静更新 、 跨我的项目共享模块 的问题
但基于现有的编译时插件化机制去实现，无奈躲避 工具链强绑定 ， 编译时确定能力近程模块生产关系 的难题
试想一下，你须要应用模块联邦这么技术，须要做的前置条件有多重，须要降级真个工具链！而且不同工具链之前的联邦模块是相互不通的！模块的流通性绑定在了你抉择的工具链上。
模块联邦新反动
破除这两大难题的惟一解就是将其 sdk 化，这是hel-micro 对模块联邦实现的全新思考，也是发动模块联邦新反动的秘密武器。
sdk 化 后，任何技术栈、任何工具链均可无损、无痛接入模块联邦技术。
运行时的模块生产关系
从工具链回归到 js 语言自身，意味着模块生产关系从编译时晋升到运行时，将极大进步动静载入近程模块的灵活性，为更简单的业务赋能。
降维打击
比照依赖工具插件实现的模块联邦，hel-micro从语言层面的实现将对其余模块联邦实现造成降维打击。
相比传统的 npm 共享形式，hel-micro也具备更高效的代码共享能力（运行时共享）
解密 sdk 化外围实现
要实现 sdk 化，意味着我么必须挖掘出 js 语言自身的隐含能力，并跳出传统的打包流程思维，能力达到咱们的最终目标
异步 impor 暗藏的能力
通常咱们都会在头文件应用 import 关键字动态导入其余模块，但其实 import 能够作为函数调用，异步的导入一个模块，并返回一个 promise 对象
const mod = await import('./some-mod');所以我么能够通过微调模块的加载程序，来达到为一个模块被其余模块动态导入之前可能为它注入新代码的成果
而这个异步 import 带来的提前注入成果成为了 hel-micro 为模块代理对象注入近程运行时代码的要害实现点，让 hel-micro 能够位用户提供懒加载和预加载两种加载形式。
上图里两个外围接口：libReady接口负责裸露模块，preFetchLib接口负责拉取模块，通过调用接口的行为让每一个模块都体现为提供方或者消费者。
运行时依赖剖析
hel-micro通过外部保护的 事件总线 、 模块池 、 款式池 、 元数据池 四个数据结构，让有多级依赖档次的近程模块得以高效并平安有序的加载。
其中 模块池 能保障模块不被反复加载并被下层各方调用者重复使用。
元数据 - 模块的灵魂
模块的本质是构建产物文件的汇合，hel-micro通过提供构建时的插件，收集好产物的网络门路并按 sdk 规定的协定存储起来，得以后续能够在网络让 sdk 能够下载并执行所有的近程模块。
双构建机制
hel-micro应用 rollup 打包本地可动态导入的代理文件，应用 webpack 打包近程注入的理论运行代码，来达成能够本地动态导入 node_modules 里的代理模块对象失去残缺的类型提醒，让用户想应用本地模块的应用近程模块的极致开发体验
内定了 4 个目录 hel_dist，hel_proxy，hel_proxy_es，hel_bundle 来承载不同的产物，供 package.json 配置不同的入口。
其中 hel_proxy，hel_proxy_es 目录下的文件是就是我么说到的模块代理对象的入口文件，我么能够看到该文件近乎一个空壳，所以它对模块应用方的打包体积大小影响简直能够省略不计。
平台与生态
hel-mirco sdk 次要依附规范化的元数据格式来做近程模块加载，所以只有任意用户装置格局提供模块，即可被 hel-micro 加载，这将极有利于它的情态建设。
反对模块任意部署
sdk 与平台是解耦的，我么默认提供了和 hel pack 与npm unpkg的反对，但容许你能够将模块公布到网络上的任意文件服务，仅需晓得其部署地址即可。
如用户将 hel-meta.json 元数据保留到后盾数据库（可联合 devops 流水线），就可很快搭出一个相似 hel pack 的中心化的模块管控平台
中心化的模块管控平台对模块施行 版本预览 、 灰度放量 、 秒级回滚 等工作会特地不便，但它不障碍 sdk 以去中性化的形式加载多平台包体，因为 sdk 天生反对同时从多个不同的平台拉取近程模块并应用，例如同时拉群 unpkg 和 hel pack，平台值被作为命名空间来隔离不同平台可能充斥的模块。
下层生态建设
hel-micro自身只提供近程模块加载的能力，具体的 ui 适配层还须要下层封装库区实现，目前的布局如下图
以 hel-micro-react为例，提供以 react 钩子函数的模式懒加载近程组件，并同时提供 shadow dom 款式隔离性能
何时采纳 hel-micro
以后时刻当你遇到以下任意一种情景时，采纳 hel-micro 都相对值得你投入去尝试。
roadmap 2022~2023
结语
模块联邦对于搭建超大型 js 工程能到锦上添花的作用，巨型利用的模块部署效率、共享效率都将迎刃而解，同时搭配 微容器 相干框架（如 wujie、rame）等，为你的隔离运行需要保驾护航，欢送 star hel-micro，理解并应用。
_
我的其余开源作品友链（欢送关注与理解）：
concent，一个自带依赖收集、提供 setup 个性的 react 数据流计划
limu，一个比 immer 更高效的 js 不可变操作库