韩海Tempest

ESM的加载

Nov 14 · 10min

1、查找、下载并将所有文件解析为模块记录(模块图)

构建模块记录

  • 找出下载包含模块的文件位置(模块解析)
  • 获取文件(从URL下载或者文件系统加载)
  • 解析文件生成模块记录

查找文件

通过解析入口文件,匹配模块标识符,一步步找到后续模块,确定其依赖关系,然后重复上述流程,找到并加载这些依赖

动态导入:使用import()加载的任何文件都被视为独立图的入口,动态导入的模块视为一个新的图,该图单独处理

在上述的模块加载解析过程中,会缓存模块实例,所以如果多个图中都引用了同一个模块,只会有一个模块实例。

加载器中会使用模块映射来管理缓存的模块。

当加载器在获取一个模块时,会将该模块的URL放到模块映射中,记录正在获取该文件(标注为fetching状态)。

如果有其他模块在加载过程中查找到了相同的URL,在模块映射中匹配到状态fetching,它会跳过该模块,到下一个URL

解析

模块记录创建完成,就会被放入到模块映射中。后续的模块加载它,加载器都可以在模块映射中获取

2、实例化

为其分配内存地址,将模块导入导出的实例与该内存地址相关联。(实时绑定)当导出模块有更改时,这个更改会同步到导入模块 为了实例化模块图,JS引擎将执行深度优先后续遍历

3、评估

进行值的填充,将内存中的地址填充为模块的导出值

参考:https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

>
CC BY-NC-SA 4.0 2021-PRESENT © 韩海Tempest