ES Module是目前JavaScript模块加载的主流方案，通过import和export实现静态、标准化的模块机制，支持Tree Shaking、动态导入和代码分割，提升性能与维护性，推荐新项目优先使用。
JavaScript实现模块加载，现在最主流且官方推荐的方式就是通过ES Module（ESM）。它彻底改变了我们组织和复用代码的方式，解决了过去全局变量污染、依赖管理混乱等一系列老大难问题。简单来说，ESM提供了一套内置的、标准化的机制来定义和使用模块，让代码结构更清晰，也更容易维护和优化。
解决方案
ES Module的核心在于
import和
export这两个关键词。它们是声明性的，意味着在代码执行前，模块的依赖关系就已经被确定了，这为很多编译时优化，比如Tree Shaking，打下了基础。
定义一个模块很简单，你只需要用
export关键字把你想暴露出去的变量、函数、类等标记出来。比如：
// utils.js
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export class Calculator {
constructor() {
console.log('Calculator initialized');
}
multiply(a, b) {
return a * b;
}
}
// 也可以默认导出一个
export default function subtract(a, b) {
return a - b;
}然后，在另一个文件中，你可以用
import来引入这些模块：
// main.js
import { PI, add, Calculator } from './utils.js'; // 命名导入
import sub from './utils.js'; // 默认导入
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5
const calc = new Calculator();
console.log(calc.multiply(4, 5)); // 20
console.log(sub(10, 3)); // 7
// 动态导入：import() 返回一个 Promise，可以在运行时按需加载
document.getElementById('loadButton').addEventListener('click', async () => {
const { add } = await import('./utils.js');
console.log('Dynamically loaded add function:', add(10, 20));
});在浏览器环境中，使用ES Module需要将
script标签的
type属性设置为
module：
ES Module Demo
而在Node.js环境中，你需要确保文件以
.mjs结尾，或者在
package.json中设置
"type": "module"，这样Node.js才会将其识别为ES Module。否则，它会默认按CommonJS规范来处理
.js文件。
ES Module的设计理念，从一开始就考虑到了浏览器环境的异步特性。它默认就是严格模式，且模块顶层的
this是
undefined，这和浏览器全局环境下的
window或CommonJS模块中的
module.exports都不同，避免了一些意外的副作用。
ES Module与CommonJS：它们到底有什么不同，我该怎么选？
这俩兄弟，说实话，经常让人有点迷糊，尤其是在Node.js里，它们有时候还能混着用。但从根本上讲，ES Module和CommonJS（Node.js早期广泛使用的模块系统）在设计哲学和实现机制上有挺大区别。
首先是语法。ESM用的是
import和
export，非常直观，而且是语言层面的标准。CommonJS则是
require()和
module.exports（或者
exports），这是Node.js运行时提供的一套API。
再来是加载机制。ESM是静态的，这意味着在代码执行前，模块的依赖关系就已经确定了。你可以想象成，在编译阶段，或者说在浏览器解析
