CommonJS 与 ESM 的区别与比较

随着现代 JavaScript 应用程序和模块化开发的不断发展，理解 CommonJS（CJS）和 ESM（ES Modules）之间的区别变得越来越重要。无论你是前端开发者、后端开发者，还是全栈开发者，掌握这两种模块系统对于编写高效、可维护的代码至关重要。本文将对这两种模块系统进行对比，深入分析它们的工作原理、优缺点以及实际应用场景。

1. 什么是 CommonJS 和 ESM？

CommonJS（CJS）

CommonJS 是 Node.js 最早期的模块系统。它的设计目标是为 JavaScript 提供同步加载模块的机制，主要应用于服务器端开发。CommonJS 使用 require() 来导入模块，module.exports 来导出模块。

示例：

// greet.js
module.exports = function greet(name) {
  console.log(`Hello, ${name}!`);
};

// app.js
const greet = require('./greet.js');
greet('World');

在这个示例中，greet.js 模块通过 module.exports 导出一个函数，而 app.js 使用 require() 导入该模块并调用 greet() 函数。

ESM（ES Modules）

ESM 是 JavaScript 官方引入的模块系统，它从 ECMAScript 6（ES6）开始成为标准，并在现代浏览器和 Node.js 中广泛支持。ESM 采用 import 和 export 语法，它具有静态分析能力，能够在编译时确定模块的依赖关系，从而支持诸如 树摇（Tree Shaking） 等优化。

示例：

// greet.js
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

// app.js
import { greet } from './greet.js';
greet('World');

2. CommonJS vs. ESM：关键差异

模块加载方式

• CommonJS：require() 是同步加载的，这意味着模块的导入会阻塞后续代码的执行，直到模块被加载完成。这对于在服务器端使用非常方便，因为模块通常存储在本地磁盘中，加载速度较快。

const greet = require('./greet.js');  // 同步加载

• ESM：import 是静态导入，模块的依赖关系在编译阶段就能确定，但实际加载时通常是异步的，尤其是在浏览器环境中，模块会被异步加载。这种机制可以优化浏览器端的性能，避免模块加载过程阻塞 UI 渲染。

import { greet } from './greet.js';  // 静态导入

动态加载模块

• CommonJS：支持动态导入，即可以在任何地方调用 require()，这使得你可以在运行时决定是否加载模块。

if (someCondition) {
  const greet = require('./greet.js');
  greet('World');
}

• ESM：ESM 的 import 是静态的，不能在条件语句或函数内部进行动态导入。如果需要动态加载模块，ESM 提供了 import() 语法，它是异步的，返回一个 Promise。

if (someCondition) {
  import('./greet.js').then(module => {
    module.greet('World');
  });
}

模块导出方式

• CommonJS：通过 module.exports 和 exports 对象来导出模块。module.exports 是导出的主要对象，exports 是 module.exports 的引用。

// greet.js
module.exports = function greet(name) {
  console.log(`Hello, ${name}!`);
};

• ESM：通过 export 和 export default 进行导出。ESM 支持具名导出和默认导出。

// greet.js
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 或者默认导出
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

兼容性与支持

• CommonJS：作为 Node.js 的默认模块系统，CommonJS 在服务器端环境中应用广泛，但它不被浏览器原生支持。在浏览器中，虽然可以通过打包工具（如 Webpack、Browserify）来使用 CommonJS 模块，但它并不是原生支持的标准。

• ESM：ESM 是浏览器和 Node.js 都原生支持的模块系统。现代浏览器都支持 <script type="module"> 标签来直接加载 ESM 模块，并且 Node.js 从版本 12 开始也支持 ESM（通过 .mjs 文件扩展名或者在 package.json 中设置 type: "module"）。

3. 优缺点对比

特性	CommonJS	ESM
模块加载	同步加载	静态导入（但通常异步加载）
动态导入	支持 require() 动态导入	支持 import() 异步动态导入
导出语法	module.exports 和 exports	export 和 export default
兼容性	主要用于 Node.js，不直接支持浏览器	浏览器和 Node.js 都原生支持
性能优化	无树摇优化，较难进行编译时优化	支持树摇（Tree Shaking）和静态分析，优化性能
同步/异步	完全同步	静态导入但加载通常异步

优点：

• CommonJS：在 Node.js 中支持简单直接，适合服务器端开发。由于同步加载，模块导入非常直接，代码易于理解。
• ESM：作为现代标准，ESM 提供了更多的优化和性能提升（如树摇）。它支持在浏览器和 Node.js 中统一的模块系统，并且通过静态分析使得代码更容易优化和拆解。

缺点：

• CommonJS：不适合在浏览器环境中直接使用，需要打包工具支持。模块加载是同步的，在某些场景下可能会导致性能瓶颈。
• ESM：语法和行为上与 CommonJS 有显著差异，可能需要适配和转换现有的 CommonJS 代码，尤其是在老旧的 Node.js 项目中。此外，静态导入使得某些动态场景（如条件加载）变得更麻烦。

4. 什么时候使用 CommonJS，什么时候使用 ESM？

• 使用 CommonJS：如果你的应用主要运行在 Node.js 环境中，并且需要较好的同步模块加载支持，CommonJS 是一个很好的选择。它适用于早期的 Node.js 项目或库。

• 使用 ESM：如果你在构建现代 JavaScript 应用，尤其是需要支持浏览器端代码或者 Node.js 12 以上的版本，ESM 是未来的标准。它不仅支持更高效的模块化开发，而且在性能上有更多优化空间，特别是在现代 Web 开发中，树摇、懒加载和异步加载等功能尤为重要。

5. 结语

无论是 CommonJS 还是 ESM，都在 JavaScript 生态中占据重要地位。随着浏览器和 Node.js 对 ESM 的支持不断加强，ESM 正逐渐成为新的标准。然而，CommonJS 在现有的 Node.js 项目中依然广泛使用。了解这两者的区别，能够帮助开发者根据具体需求选择合适的模块系统，提升开发效率和代码性能。