1、查找、下载并将所有文件解析为模块记录(模块图) #
构建模块记录 #
- 找出下载包含模块的文件位置(模块解析)
- 获取文件(从URL下载或者文件系统加载)
- 解析文件生成模块记录
查找文件 #
通过解析入口文件,匹配模块标识符,一步步找到后续模块,确定其依赖关系,然后重复上述流程,找到并加载这些依赖
动态导入:使用import()加载的任何文件都被视为独立图的入口,动态导入的模块视为一个新的图,该图单独处理
在上述的模块加载解析过程中,会缓存模块实例,所以如果多个图中都引用了同一个模块,只会有一个模块实例。
加载器中会使用模块映射来管理缓存的模块。
当加载器在获取一个模块时,会将该模块的URL放到模块映射中,记录正在获取该文件(标注为fetching状态)。
如果有其他模块在加载过程中查找到了相同的URL,在模块映射中匹配到状态fetching,它会跳过该模块,到下一个URL
解析 #
模块记录创建完成,就会被放入到模块映射中。后续的模块加载它,加载器都可以在模块映射中获取
2、实例化 #
为其分配内存地址,将模块导入导出的实例与该内存地址相关联。(实时绑定)当导出模块有更改时,这个更改会同步到导入模块 为了实例化模块图,JS引擎将执行深度优先后续遍历
3、评估 #
进行值的填充,将内存中的地址填充为模块的导出值
参考:https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/