JavaScript 的模块加载器在背后是如何解析和缓存模块的？

模块加载器通过解析、实例化、执行和缓存四步机制确保ES模块仅加载一次。首先根据import路径解析出完整URL并获取源码，生成模块记录（静态分析）。接着创建模块环境记录，建立导入导出绑定，形成内存连接结构。随后执行模块代码，填充导出值，支持动态绑定。最后以模块URL为键将实例存入全局模块映射表，后续相同请求直接复用缓存，避免重复加载与执行。该机制保障模块单例性与性能，且对开发者透明。

JavaScript 的模块加载器在解析和缓存模块时，遵循一套明确的机制，确保模块只被加载一次，并且依赖关系能正确解析。这个过程主要发生在支持 ES 模块（ESM）的环境中，比如现代浏览器或 Node.js。

模块解析：从 import 到模块记录

当你使用 import 语句时，模块加载器并不会立即执行模块代码，而是先进行解析：

• 加载器会根据 import 路径（如 './utils.js' 或 'lodash'）解析出完整的模块请求 URL。
• 如果是相对路径，基于当前模块的 URL 进行解析；如果是裸模块（bare specifier），则可能需要通过映射规则（如 package.json 的 exports 字段或 import maps）找到目标文件。
• 接着，加载器获取该模块的源码（通过网络请求或文件系统读取）。
• 源码被解析成一个 模块记录（Module Record），这是 JavaScript 引擎内部的数据结构，包含模块的导入导出声明、语法检查结果等信息。

这一步只是静态分析，不执行任何代码。

模块实例化：创建模块环境

在解析完成后，进入实例化阶段：

立即学习“Java免费学习笔记（深入）”；

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

17

查看详情

• 引擎为模块创建一个 模块环境记录（Module Environment Record），用于绑定 export 和 import 的变量名到实际内存位置。
• 所有 import 绑定都是动态的、实时的引用，指向导出模块的对应变量（即使是基本类型，也是绑定而非拷贝）。
• 此时仍未执行模块主体代码，但已建立模块间的连接结构。

模块执行：运行代码并填充值

只有当模块及其依赖都完成解析和实例化后，才会开始执行模块代码：

• 模块中的顶层语句按顺序执行，可能产生副作用或初始化导出值。
• 一旦执行完成，导出的值就被确定下来，其他模块可以通过 import 绑定访问这些值。
• 由于绑定是动态的，如果导出的是一个可变变量（如 let 声明），其他模块看到的是最新值。

模块缓存：避免重复加载

模块加载器维护一个全局的 模块映射表（Module Map），以模块的 URL 作为键：

• 当首次请求某个模块时，它会被解析、实例化、执行，并将生成的模块实例存入缓存。
• 后续再有相同的 import 请求，直接复用缓存中的模块实例，不再重新下载或执行。
• 这意味着无论多少个模块导入同一个工具函数文件，该文件的代码只执行一次。

缓存机制保证了模块的单例特性，也提升了性能。

基本上就这些。整个流程是自动的，开发者不需要手动管理加载或缓存，但理解它有助于避免循环依赖问题或意外的执行顺序。

以上就是JavaScript 的模块加载器在背后是如何解析和缓存模块的？的详细内容，更多请关注php中文网其它相关文章！