举例说明为什么说ES模块比commonJS模块还优秀？

ES 模块（ESM）在前端开发中逐渐取代 CommonJS（CJS），主要是因为它提供了几个关键的优势：

1. 静态分析:

• ESM: ESM 是静态的，这意味着导入和导出可以在编译时确定。这使得构建工具（例如 Webpack、Rollup）可以进行静态分析，例如 tree-shaking（去除未使用的代码），从而减小最终打包文件的大小，提高页面加载性能。 例如，如果你的模块只使用了 math.add，tree-shaking 可以移除 math.subtract 等未使用的函数。
• CJS: CJS 是动态的，导入是运行时确定的。 这使得静态分析变得困难，因为工具无法确定哪些模块实际上会被使用。

2. 更好的代码可读性和维护性:

• ESM: ESM 的语法更加简洁和标准化，使用 import 和 export 关键字清晰地声明依赖关系。 这提高了代码的可读性和可维护性。
• CJS: CJS 使用 require() 和 module.exports，相对来说较为隐晦，尤其在处理循环依赖时容易出现问题。

3. 原生浏览器支持:

• ESM: 现代浏览器原生支持 ESM，这意味着无需额外的构建步骤即可直接在浏览器中运行 ESM 模块。 这可以简化开发流程并提高性能。 你可以直接在 <script type="module"> 标签中使用 ESM。
• CJS: 浏览器不原生支持 CJS，需要使用构建工具将其转换为浏览器可识别的代码。

4. 异步加载:

• ESM: ESM 支持异步加载模块，这意味着模块可以并行加载，从而提高页面加载速度。 import() 可以动态加载模块。
• CJS: CJS 模块是同步加载的，这意味着每个模块必须在下一个模块加载之前完成加载，这可能会导致性能瓶颈。

举例说明：

假设有两个模块：math.js 和 main.js

CJS:

// math.js
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

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