ES6 静态模块规范与 CommonJS 动态模块规范ES6 静态模块规范 ES6 模块是 JavaScript 官方

ES6 静态模块规范

ES6 模块是 JavaScript 官方推出的模块规范，它具有静态结构特性。这意味着在编译阶段（代码执行之前），就能确定模块之间的依赖关系和导出内容。

示例代码

// math.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './math';
const result = add(1, 2);
console.log(result);

解释

在 ES6 模块中，import 和 export 语句是静态的。当代码进行编译时，JavaScript 引擎可以直接分析出 main.js 依赖于 math.js 中的 add 函数。这种静态的结构使得打包工具（如 Webpack、Rollup 等）可以在编译阶段就知道哪些代码被使用，哪些代码未被使用，从而实现 Tree - Shaking，移除未使用的代码，减小打包后的文件体积。

CommonJS 动态模块规范

CommonJS 是服务器端模块规范，在 Node.js 中被广泛使用。它之所以被称为动态模块规范，是因为模块的导入和导出是在运行时动态确定的。

示例代码

// math.js
exports.add = function(a, b) {
    return a + b;
};

// main.js
const math = require('./math');
const result = math.add(1, 2);
console.log(result);

解释

在上述代码中，require 函数是动态执行的。当 main.js 运行到 require('./math') 这一行时，Node.js 才会去加载并执行 math.js 文件，然后将其中导出的内容赋值给 math 变量。这意味着在代码运行之前，无法确定到底会加载哪些模块，只有在运行时才能明确模块之间的依赖关系。

总结

CommonJS：动态模块规范，模块的导入和导出在运行时确定，不利于 Tree - Shaking。
ES6 模块：静态模块规范，在编译阶段就能确定模块之间的依赖关系和导出内容，有利于 Tree - Shaking。

ES6 静态模块规范 与 CommonJS 动态模块规范