模块加载器负责动态加载、解析和执行ES6模块，通过import和export实现静态依赖分析与作用域隔离，支持浏览器和Node.js原生模块系统。
JavaScript中的模块加载器负责在运行时动态加载、解析和执行模块。它让开发者能按需组织代码，实现模块间的依赖管理与隔离。随着ES6模块的标准化，浏览器和Node.js都原生支持模块系统，但模块加载器的核心机制依然值得关注。
模块的定义与导入导出
ES6模块通过 import 和 export 语法声明依赖和暴露接口。每个模块有独立的作用域，不会污染全局环境。
例如：
export const name = 'Alice';export function greet() { return `Hello, ${name}`; }
// 在另一个模块中
import { greet } from './utils.js';
这些语句是静态的，意味着浏览器或引擎可以在不执行代码的情况下分析依赖关系。
立即学习“Java免费学习笔记（深入）”；
模块的加载过程
当遇到 import 语句时，模块加载器开始工作，整个流程包括以下步骤：
- 解析（Resolution）：根据 import 路径查找模块文件。如果是相对路径（如 ./module.js），会相对于当前模块定位；如果是裸模块名（如 lodash），可能需要配置映射规则。
- 获取（Fetching）：通过网络请求（浏览器）或文件系统读取（Node.js）获取模块源码。
- 编译（Compilation）：将获取的源码解析为模块记录，检查语法并建立导入/导出绑定。
- 实例化（Instantiation）：创建模块的内存空间，设置变量绑定，但尚未赋值。
- 求值（Evaluation）：执行模块代码，填充导出值。
这个过程确保了模块只被加载一次，即使被多个地方导入，也只会执行一次。
动态导入与按需加载
除了静态 import，还可以使用 import() 函数动态加载模块。这返回一个 Promise，适合条件加载或懒加载场景。
if (user.isAdmin) {const adminTools = await import('./admin.js');
adminTools.init();
}
动态导入让模块加载更灵活，常用于路由控制或功能拆分。
浏览器中的模块加载行为
在HTML中，使用 type="module" 的 script 标签来加载模块：
这类脚本默认延迟执行（defer），且遵循CORS策略跨域请求模块。浏览器自动处理依赖图谱，按正确顺序加载和执行模块。
基本上就这些。模块加载器通过静态分析和运行时协调，实现了高效、安全的模块化开发体验。
