ES Modules 与 CommonJS 的核心区别是什么
es modules (esm) 是 javascript 的官方标准,采用静态分析实现按需加载和严格模式;commonjs (cjs) 是 node.js 早期的模块规范,采用动态同步加载且默认导出可变对象。两者在语法、执行时机和兼容性上存在显著差异。

ESM 使用 import 和 export 关键字,支持树摇(Tree Shaking)以优化打包体积。CJS 使用 require() 函数和 module.exports 对象,适合服务端环境。浏览器原生支持 ESM,而 CJS 需要构建工具转换或在 Node.js 中运行。
const fs = require('fs');
function add(a, b) {
return a + b;
}
module.exports = { add, fs };上述代码展示了 CJS 的基本用法:通过 require 引入依赖,并通过 module.exports 导出功能。这种写法在 Node.js 环境中广泛使用,但无法直接用于现代浏览器。
如何在项目中混合使用两种模块系统
在现代项目中,可以通过配置构建工具或运行时环境来混合使用 ESM 和 CJS。Node.js 提供了 package.json 中的 type 字段来控制模块类型,同时支持动态导入 import() 来加载 CJS 模块。
立即学习“Java免费学习笔记(深入)”;

在 Node.js 中,如果 package.json 设置了 "type": "module",则所有 .js 文件默认被视为 ESM。此时可以使用 await import('./cjs-module.cjs') 动态加载 CJS 模块。反之,如果未设置 type 或设置为 "commonjs",则默认使用 CJS,但可以通过 createRequire 从 ESM 中加载 CJS 模块。
// cjs-module.cjs
module.exports = { name: 'CJS Module' };
// esm-module.mjs
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const cjsModule = require('./cjs-module.cjs');
console.log(cjsModule.name); // 输出: CJS Module上述代码演示了如何在 ESM 中通过 createRequire 加载 CJS 模块。这种方式允许开发者逐步迁移项目,而不必一次性重构所有代码。
ESM 的动态导入特性如何影响性能
ESM 的动态导入 import() 返回一个 Promise,允许按需加载模块,从而减少初始加载时间。这对于大型应用或需要懒加载的场景非常有用。

动态导入的优势在于它可以在运行时决定加载哪些模块,而不是在编译时确定所有依赖。这使得应用能够根据用户行为或条件分支加载特定功能,提升用户体验。
// lazy-load.mjs
async function loadFeature() {
const feature = await import('./feature-module.mjs');
feature.init();
}
loadFeature();上述代码展示了如何使用动态导入加载一个功能模块。当调用 loadFeature 时,只有在该函数被触发时才会加载 ./feature-module.mjs,从而实现懒加载效果。


















