腾讯开源的 hel 提供了加载远程模块的能力,谈谈它的实现原理

news/2024/3/29 19:35:43/文章来源:https://blog.csdn.net/weixin_53312997/article/details/129180622

腾讯开源的 hel,提供了一种运行时引入远程模块的能力,模块部署在 CDN,远程模块发布后,不需要重新构建发布,就能生效。

个人觉得它的实现原理非常的不错,因此分享给大家。

远程模块可以作为微模块(模块级别的微前端),是页面级别的微前端的一种补充,因为页面级别的微前端,如 qiankun、无界等,它们的粒度太粗了,有时候需要更细粒度的微前端,例如:组件、函数级别的。这种场景,就可以使用远程模块,来实现微模块的效果。

远程模块使用示例

import helMicro from 'hel-micro';export async function callRemoteMethod() {const lib = await helMicro.preFetchLib('hel-tpl-remote-lib');return lib.num.random(22);
} 

1.引入 hel-micro 模块
2.通过 helMicro.preFetchLib 拉取远程模块
3.调用远程模块

整个使用过程非常的简单易懂,但这样无法使用 TS 类型检查。

于是又有了以下的写法:

需要先在项目入口调用:

await helMicro.preFetchLib('hel-tpl-remote-lib'); 

然后代码中就可以这样使用了:

import remoteLib from 'hel-tpl-remote-lib';function callRemoteMethod() {return remoteLib.num.random(19);
} 

TS 类型则是由 hel-tpl-remote-lib 这个 npm 仓库提供。

hel 核心原理

概念约定

  • 远程模块发布 CDN,在浏览器运行时,调用 helMicro.preFetchLib 真正拉取代码* 代理模块用于开发时的类型提示,上传到 npm。开发时安装并使用该 npm 包,可以获得 TS 类型提示* 元数据​ 元数据是一份 json 配置清单,是在远程模块构建完成后,从构架产物中提取生成的。它记录了远程模块的名称、入口脚本路径等信息

hel 运行流程

1.当调用 helMicro.preFetchLib 时,先拉取元数据,从元数据中获取到入口脚本的 url,然后拉取远程模块入口并执行,最后 helMicro.preFetchLib 将模块返回,代码中就可以直接使用了。
2.import 代理模块,实际上是从远程模块的缓存中读取模块。因此,必须要等待 helMicro.preFetchLib 拉取完成后import 的代理模块才能够获取到远程模块

hel 的默认拉取元数据的方式,是根据远程模块名称,到 unpkg CDN 对应的 npm 包下,获取元数据 meta_data.json 文件。这个拉取元数据的过程也可以开发者自定义。

整个流程非常简单,但难度在于,如何构建打包出代理模块和远程模块

模块构建

代理模块

代理模块负责以下内容:

  • 在运行时读取远程模块的缓存
  • 用于提供 TS 类型支持

运行时读取远程模块的缓存

hel 提供了 exposeLib 函数,用于读取远程模块的缓存

打包代理模块时,参考以下代码作为构建入口:

import type { LibProperties } from './你真正的模块代码';
import { exposeLib } from 'hel-lib-proxy';// 读取远程模块缓存,远程模块名为:hel-tpl-remote-lib
export const lib = exposeLib<LibProperties>('hel-tpl-remote-lib');// export 类型
export type Lib = LibProperties;// export 远程模块的缓存代码
export default lib; 

该入口文件主要做了以下事情:

  • export 导出 TS 类型
  • 使用 exposeLib,将远程模块的缓存,暴露出来

以上述代码作为入口打包,实际上并没有将模块真实代码打包到产物中。因此代理模块,是一个非常小的模块,没有任何的模块逻辑。

在项目中使用远程模块 hel-tpl-remote-lib,最后打包只会打包代理模块这一小部分代码,不会将真正的代码打包到项目的产物中,因此还能提升项目的构建速度

真正的代码,是运行时,在 preFetchLib 拉取远程模块时加载并运行的。

提供 TS 支持

只需要在 package.json声明 typing 字段

{ "main": "hel_proxy/entry.js", "typings": "typings/index.d.ts",
} 
  • typing 的值为构建时生成的 TS 类型声明文件的路径。* main 则用于声明代理模块的入口,指向的是打包后的产物。### 发布

代理模块直接发布到 npm 即可,按 npm 包的用法正常引入和使用即可

远程模块

远程模块的职责如下:

  • 提供远程模块的真实运行代码
  • 通知 hel 的 preFetchLib 函数,远程模块加载完成
  • 提供 index.html,用于提取元数据,例如提取出远程模块的入口(加载时,需要首先拉取哪些代码)

要做到以上的内容,远程的模块,也需要用一个入口文件再包一层,伪代码如下:

import { libReady } from '@tencent/hel-lib-proxy';async function main() {// 这里是 import 真正的模块代码了const lib = await import('./你真正的模块代码');// 注意此处传递的是 defaultlibReady('hel-tpl-remote-lib', lib.default);
}main().catch(console.error); 

加载入口时立即调用 main 函数:

  • import 真正的模块代码
  • 调用 libReady 并传入远程模块的值,该函数会通知 preFetchLib,远程模块已经加载完成

如果一个远程模块,依赖另外一个远程模块,怎么办?

假如:hel-tpl-remote-lib 依赖 other-libother-lib 为另一个远程模块。即

// hel-tpl-remote-lib 的模块代码
import xxx from "other-lib" 

那就 import other-lib 前,先执行 preFetchLib,拉取 other-lib。这样 other-lib 的代理模块,就能正确获取到内容。

import { LIB_NAME } from '../src/configs/subApp';
import { libReady } from '@tencent/hel-lib-proxy';async function main() {// 如有其他远程包依赖并且需要在内部使用静态导入的语法,可使用 preFetchLib 来加载这些包体const { preFetchLib } = await import('@tencent/hel-micro');await preFetchLib('other-lib');// 必须要用动态 import,因为如果当前包,还依赖其他的 hel 微前端依赖,需要 preFetchLib 之后,再进行引入。const lib = await import('./你真正的模块代码');// 注意此处传递的是 defaultlibReady('hel-tpl-remote-lib', lib.default);
} 

如果存在嵌套的远程模块,就必须要用动态 import 引入真正的模块代码

await import('./你真正的模块代码') 

元数据提取

hel 通过分析 index.html,来提取元数据,最重要的是要提取出模块的入口脚本,因为打包产物可能会有多个文件,要确定哪个才是入口。

假如有以下 HTML:

<!doctype html>
<html lang="en">
<script>这是一串内联 script
</script>
<script  src="https://unpkg.com/hel-tpl-remote-lib@2.0.0/hel_dist/static/js/main.5ab2b93c.chunk.js"
></script>
</html> 

那么会提取到两个入口脚本:

  • 内联脚本:内联脚本会被提取出来,存放到单独的文件,该文件的路径会被记录到元数据
  • main.5ab2b93c.chunk.js

上述 index.html 会得到以下元数据(节选):

{bodyAssetList: [{"tag": "script","attrs": {"src": "https://unpkg.com/hel-tpl-remote-lib@2.0.0/hel_dist/hel_userChunk_1.js"}},{"tag": "script","attrs": {"src": "https://unpkg.com/hel-tpl-remote-lib@2.0.0/hel_dist/static/js/main.5ab2b93c.chunk.js"}}]
} 

注意这里的资源路径是完整的 url 了。

preFetchLib 函数会读取元数据,然后拉取这些入口脚本。

发布

开源版本的 hel,远程模块和元数据,同样会发布到 npm。这样就可以从 unpkg 这个 CDN,直接拉取到元数据和远程模块

从元数据的入口脚本可以看出,入口脚本的路径,已经是指向了 unpkg

小结

以上内容,就是一个完整的 hel 的原理:

  • 在页面初始化前,先 preFetchLib 拉取远程模块,然后直接可以拿到远程模块的对象
  • 然后代理模块也能够从缓存中,获取到远程模块的内容

难点则在于如何打包远程模块和代理模块,需要遵守特定的规范:

  • 远程模块,则需要处理嵌套的远程模块,然后通知 preFetchLib 函数,加载完成
  • 代理模块,需要导出 TS 类型,并读取远程模块的缓存并导出
  • 元数据,需要根据 index.html 提取出入口脚本

但你觉得这就完了吗?其实没有。

元数据的妙用

hel 提供了自定义拉取元数据的能力,这意味着,我们有了控制的返回元数据的能力,元数据中有远程模块的入口,因此能控制拉取的远程模块

下面是一个例子:

元数据通过版本管理平台的接口拉取。

通过在版本管理平台上配置,可以返回的元数据的对应的远程模块版本,从而做到控制远程模块的版本号,能做到回滚,灰度等能力

上述版本管理平台,其实在腾讯内部已经实现,但目前仍未开源,但从 github 上已经看到是计划中了

有了自定义拉取元数据的能力,这个过程就会有非常大的自由度,由此可以衍生出一个非常大的微模块生态。理论上可以做到但不限于以下的效果:

  • 控制全局的远程模块的版本
  • 快速回滚能力
  • 灰度能力、AB test 能力,根据地域分布、用户等条件分发不同的元数据
  • 按项目维度,进行版本控制,不同的项目,返回不同的元数据,从而使用不同的远程模块版本
  • ……

总结

不过截止目前(2022.12.13),开源 hel 目前提供的部署方式,只是部署到 unpkg CDN 上,对于公司项目来说,不太适合,需要提供更多的最佳实践;它的开源生态,也有待完善。

但不得不承认的是,hel 的整个思路,的确是较为优秀,值得学习和研究, 能够作为一种优秀的远程模块/微模块方案。

最后也希望 hel 能越做越好吧~

最后

整理了一套《前端大厂面试宝典》,包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法,一共201道面试题,并对每个问题作出了回答和解析。

有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享

部分文档展示:



文章篇幅有限,后面的内容就不一一展示了

有需要的小伙伴,可以点下方卡片免费领取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_73150.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASEMI高压MOS管60R380参数,60R380特征,60R380应用

编辑-Z ASEMI高压MOS管60R380参数&#xff1a; 型号&#xff1a;60R380 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;600V 栅源电压&#xff08;VGS&#xff09;&#xff1a;20V 漏极电流&#xff08;ID&#xff09;&#xff1a;11A 功耗&#xff08;PD&#x…

手写一个文件上传demo

背景 最近闲来无事&#xff0c;同事闻了一下上传文件的基本操作&#xff0c;如何用文件流来实现一个文件的上传功能 基本概念 流&#xff08;Stream&#xff09;是指在计算机的输入输出操作中各部件之间的数据流动。可以按照数据传输的方向&#xff0c;将流可分为输入流和输出…

矩阵通高效监管企业新媒体矩阵,账号集中管理与运营数据分析

越来越多的企业在全网布局旗下账号&#xff0c;希望通过社媒传播矩阵&#xff0c;以内容连接产品与用户&#xff0c;达成增加销售线索或扩大品牌声量的目的。构建矩阵的优势在于&#xff0c;内容能多元发展&#xff0c;聚集不同平台流量&#xff1b;多种营销渠道自主掌控&#…

渗透测试之端口探测实验

渗透测试之端口探测实验实验目的一、实验原理1.1 端口1.2 服务二、实验环境2.1 操作机器2.2 实验工具三、实验步骤1. 使用netstat手动探测指定服务2. 使用namp工具进行端口扫描2. 使用ssh命令总结实验目的 了解端口、服务的基本概念熟悉手工探测方式netstat命令的使用掌握扫描…

Spring Boot与Vue:实现图片的上传

文章目录1. 项目场景2. 问题描述3. 实现方案3.1 方案一&#xff1a;上传图片&#xff0c;转换成 Base64 编码并返回3.1.1 前端页面组件3.1.2 前端 JS 函数3.1.3 后端 Controller3.2 方案二&#xff1a;上传图片&#xff0c;并返回图片路径3.2.1 前端页面组件3.2.1 前端 JS 函数…

linux网络编程-多进程实现TCP并发服务器

服务端流程步骤socket函数创建监听套接字lfdbind函数将监听套接字绑定ip和端口listen函数设置服务器为被动监听状态&#xff0c;同时创建一条未完成连接队列&#xff08;没走完tcp三次握手流程的连接&#xff09;&#xff0c;和一条已完成连接队列&#xff08;已完成tcp三次握手…

HTML Flex 布局

基本概念 采用 Flex 布局的元素&#xff0c;称为 Flex 容器&#xff08;flex container&#xff09;&#xff0c;简称“容器”。它的所有子元素自动成为容器成员&#xff0c;称为 Flex 项目&#xff08;flex item&#xff09;&#xff0c;简称“项目”。容器默认存在两根轴&am…

JavaSE之常用关键字学习

文章目录Java常用关键字学习1、static关键字学习1.1 用法一&#xff1a;修饰成员变量1.2 用法二&#xff1a;修饰成员方法1.3 用法三&#xff1a;修饰代码块1.4 用法四&#xff1a;修饰内部类类1.5 单例设计模式2、extends关键字学习2.1 继承的特点2.2 方法重写3、this、super关…

基于Comsol的花瓣形穿孔微穿孔板的吸声理论仿真

研究背景&#xff1a; 为了抑制噪声污染&#xff0c;已经开发了许多吸声材料和结构。传统的吸声材料&#xff0c;如开孔泡沫和纤维棉&#xff0c;随着时间的推移会劣化&#xff0c;因为小颗粒常常从这些多孔材料的骨架中脱落。此外&#xff0c;脱落的小颗粒可能污染建筑物内的…

立项近7年,索尼产品经理分享PS VR2开发背后的故事

备受期待的索尼PS VR2终于正式发售&#xff0c;VR爱好者们终于有机会体验到《地平线&#xff1a;山之呼唤》等PS VR2独占的VR大作。近期&#xff0c;为了解PS VR2头显诞生背后的故事&#xff0c;外媒AV Watch采访到PS VR2的开发负责人Yasuo Takahashi&#xff0c;在本次采访中&…

面试题-----JDBC单例模式(懒汉式和饿汉式)

1.单例概念 作为一种常见的设计模式&#xff0c;单例模式的设计概念是"两个私有,一个公有",即私有属性/成员变量和私有构造,以及公有方法,常用于在整个程序中仅调用一次的代码。 2.具体操作 从单例模式的描述来看,单例模式并不能用于多次频繁调用的设计中,而更适用…

剑指 Offer 55 - I. 二叉树的深度

摘要 剑指 Offer 55 - I. 二叉树的深度 一、深度优先搜索 如果我们知道了左子树和右子树的最大深度l和r&#xff0c;那么该二叉树的最大深度即为&#xff1a;max(l,r)1。 而左子树和右子树的最大深度又可以以同样的方式进行计算。因此我们可以用「深度优先搜索」的方法来计…

校园学生翻墙打架识别检测系统 yolov7

校园学生翻墙打架识别检测系统通过yolov7网络模型深度学习分析技术&#xff0c;校园学生翻墙打架识别检测算法可以对&#xff1a;打架行为、倒地行为识别、人员拥挤行为、攀高翻墙违规行为等违规行为进行实时分析检测。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#x…

动手学深度学习v2—01数据操作+数据预处理

[TOC]此次用到的虚拟环境&#xff1a;pytorchmwy项目名称&#xff1a;limuAI所需框架和工具&#xff1a;pytorch&#xff0c;pandas一、创建CSV文件所需工具&#xff1a;pandas在与项目同等目录下创建一个文件夹名为data&#xff0c;其中文件名称为house_tiny.csv。代码如下&am…

随想录二刷 (双指针法) leetcode 27 26 283 844

双指针法的原理 双指针法相对于暴力解法的优点有以下几点 暴力遍历的时间复杂度会比较高双指针法利用两个指针进行遍历完成双层循环所做的事情 双指针一般有两种方法 同向指针&#xff0c;双向指针 第一题 leetcode 27 移除元素 题目描述 题目分析 采用暴力遍历可以得出结…

高效制作知识库的软件工具,这6个都很不错哦!

任何工作流程都离不开文档管理&#xff0c;因此文档管理也是企业数字化转型中的重要环节。面对复杂的业务流程、频繁的文档编辑任务和跨区域的文件共享需求&#xff0c;优秀的文档管理体系能够帮助企业实现安全的文档存储&#xff0c;高效的文档搜索&#xff0c;便捷的文档协作…

(一)Spring-Cloud源码分析之核心流程关系及springcloud与springboot包区别(新)

文章目录1. 前言2. springcloud简介3. Springcloud包简介4. Springcloud和Springboot流程关系5. Springcloud启动流程新增的功能和接口5.1 新增接口5.2 新增功能类5.2.1 spring-cloud-context包5.2.2 spring-cloud-commons包6. Springcloud实现机制带来的问题7. Springcloud和S…

深入浅出C++ ——手撕红黑树

文章目录一、红黑树的概念二、红黑树的性质三、红黑树节点的定义四、红黑树的插入操作五、红黑树的验证五、红黑树的删除六、红黑树与AVL树的比较七、红黑树的应用八、红黑树模拟实现一、红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存…

Typecho COS插件实现网站静态资源存储到COS,降低本地存储负载

Typecho 简介Typecho 是一个简单、强大的轻量级开源博客平台&#xff0c;用于建立个人独立博客。它具有高效的性能&#xff0c;支持多种文件格式&#xff0c;并具有对设备的响应式适配功能。Typecho 相对于其他 CMS 还有一些特殊优势&#xff1a;包括可扩展性、不同数据库之间的…

(二十五)、实现评论功能(5)【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1&#xff0c;实现二级回复的入库操作 1.1 两个子组件&#xff08;comment-item和comment-frame&#xff09;与父组件reply之间的属性传值 comment-item&#xff1a; props: {item: {type: Object,default () {return {}}}},comment-frame&#xff1a; props: {commentObj: {…