最近听人说 JavaScript 模块化这事儿，感觉脑袋都嗡嗡的。AMD、CMD、ES Module...听起来都像科幻小说里的东西。其实它们是 JavaScript 开发过程中出现的三种不同的“模块化”方法。别担心，我尽量用简单易懂的方式来解释一下保证你不会被搞晕。

JavaScript 模块化：为什么需要它？

话说回来为什么我们需要模块化呢？以前写 JavaScript 代码，就像把一堆积木随意堆在一起一样。每个函数、每个文件都乱七八糟地写在一起， 整起来。 很容易互相干扰，让人难以维护。如果想修改某个地方的代码，整个项目都要重新编译一遍，简直要崩溃！所以才有了模块化的出现。

JavaScript 模块化的发展历程

JavaScript 模块化的发展就像一场马拉松比赛，各种新的方法不断涌现。早期大家用的都是简单的脚本语言直接拼接代码或者使用一些简单的技巧来组织代码。因为前端工程化的不断发展，各种复杂的工具和规范也应运而生，操作一波。。

从 CommonJS 到 ES Module：从运行时到编译时

翻旧账。 现在开发基本都用 ESM，但理解历史差异有助于维护老项目和构建工具原理。

AMD ：异步加载的王者

AMD 的诞生和原理

要说 AMD 的诞生，还得要感谢 RequireJS 这个工具库。在浏览器环境下加载 JavaScript 代码的时候， 礼貌吗？ 有时候会遇到异步加载的问题。就是说有些代码需要先加载才能施行其他的代码。这时候就需要一个规范来定义如何异步加载模块了。

AMD 的特点

• 异步加载这是 AMD 最重要的特点。它可以将模块分割成多个小块进行异步加载，提高页面加载速度和性能。
• 依赖关系管理AMD 会自动管理模块之间的依赖关系，确保它们按照正确的顺序加载。

• 兼容性好AMD 是一个非常成熟的规范，很多浏览器都支持它。
• 性能好通过异步加载和依赖关系管理，可以显著提高页面加载速度。

• 学习曲线陡峭需要学习 RequireJS 等工具库的使用。
• 配置比较复杂配置 AMD 项目相对来说比较复杂。

CMD ：按需加载的灵活选择

CMD 是 SeaJS 提出的一个模块化规范。它主要关注的是“按需加载”和“延迟施行”。 可不是吗！ 也就是说只有在真正需要的时候才去加载相关的模块。

• 按需加载: 只有当某个模块被用到时才会动态地引入.
• 延迟施行: 直到真正使用才会运行相关代码.

CMD 的优点

• 减少初始体积: 只引入需要的代码, 有效降低网页体积.
• 提升性能: 避免不必要的资源请求, 加速页面渲染.

• **相对较新**: 不如 AMD 成熟, 支持程度略有不足.
• **配置较为复杂**: 配置 CMD 项目可能比较麻烦.

ES Module ：现代 JS 的标准

ESM 的诞生和原理

得了吧... ES6引入了 ES Module ，它是目前最流行的 JavaScript 模块系统。ESM 主要基于静态分析来实现依赖管理和模块解析。

### ESM 的特点

• **静态解析** : 通过解析代码来确定依赖关系, 无需动态创建 module 对象.
• **更简洁的语法**: 使用 `import` 和 `export` 关键字进行模块导入与导出, 更方便易读.

### ESM 的优点

• **官方标准**: 被 ECMAScript 标准定义, 兼容性最好.
• **语法简洁**: 使用 import/export 更易于理解和编写.
• **性能优化**: 由于采用静态解析, 可以更好地进行优化.

### ESM 的缺点

• **浏览器支持有限**: 虽然主流浏览器已经支持 ESM ，但仍然有一些旧版本的浏览器不支持 .

一下：三种方法的根本区别

运行时 vs. 编译时

方法	运行时	编译时
CommonJS	运行时
AMD	运行时
ESM	编译时

服务端 vs. 全场景

方法	服务端	全场景
CommonJS	适合服务端环境	通用
AMD	适合浏览器环境	通用
ESM	通用环境	通用环境

同步 vs. 并发

哪个更好？现在用 ESM！

总的现在开发基本都用 ES Module 了。主要原因是 ESM 是官方标准而且支持广泛 。比拟的 。

---

---

---

方法	同步	异步/并发
CommonJS	同步 loading , 一次性 loading 所有依赖项后施行主程序.	async/await 或 Promise 可以实现并行 loading

---