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
：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ES Module Demo</title> </head> <body> <button id="loadButton">Load More</button> <script type="module" src="./main.js"></script> <!-- 注意：type="module" 的脚本默认是 defer 的 --> </body> </html>
而在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是静态的，这意味着在代码执行前，模块的依赖关系就已经确定了。你可以想象成，在编译阶段，或者说在浏览器解析
<script type="module">
的时候，它就知道哪个模块依赖哪个模块。这带来了很大的好处，比如前面提到的Tree Shaking。而CommonJS是动态的，
require()
是一个函数调用，它可以在代码运行的任何时候、任何地方被调用，甚至可以根据条件来加载不同的模块。这种运行时加载的特性，让CommonJS在某些场景下显得更灵活，但同时也牺牲了一些优化空间。
一个很关键的区别是值的导出与导入。CommonJS导出的是值的拷贝。当你
require
一个模块时，你得到的是它
module.exports
在那个时间点的一个快照。如果原模块内部后面改变了某个导出的值，你导入的那个值是不会跟着变的。但ESM是值的引用（live binding）。如果你导入了一个模块里的变量，而这个变量在原模块里被修改了，你导入的那个变量也会跟着变。这在处理一些状态共享的场景时，需要特别注意。
还有就是
this
的指向。在ESM模块的顶层，
this
是
undefined
。而在CommonJS模块中，
this
默认指向
module.exports
。这虽然是个小细节，但有时候会导致一些意外行为。
至于怎么选？我的建议是，新项目，尤其涉及浏览器前端的，无脑选ES Module。它是未来，是标准，有更好的生态工具支持（比如Webpack、Rollup的Tree Shaking），也更符合现代JavaScript的开发范式。如果你在写纯Node.js的后端服务，并且不需要考虑浏览器兼容性，或者是在维护一个老项目，CommonJS依然是可行的，因为它在Node.js社区有深厚的积累。当然，Node.js现在也完全支持ESM，甚至鼓励大家迁移。现在很多项目都是用构建工具把ESM代码打包成CommonJS或者反过来，所以实际开发中，你可能同时会接触到它们。
在实际项目中，ES Module的异步加载机制会带来哪些便利和挑战？
ES Module在浏览器环境中是默认异步加载的，这和
<script defer>
或者
<script async>
有点像，但又不仅仅是这样。它的便利性是显而易见的：
便利性：
- 非阻塞渲染： 模块脚本的加载和执行不会阻塞HTML的解析和渲染。这意味着用户可以更快地看到页面内容，提升了用户体验。想象一下，如果你的JS模块很大，同步加载会卡住整个页面，那体验会多糟糕。
- 并行加载： 浏览器可以同时请求多个模块文件，只要它们之间没有直接的依赖关系，或者依赖关系解析清楚后，就能并行下载。这大大加快了大型应用的启动速度。
- 按需加载（Dynamic Import）： 通过
import()
语法，我们可以在运行时动态地、条件性地加载模块。这简直是前端性能优化的利器。比如，一个用户只有点击某个按钮才需要某个复杂组件的代码，我们就可以在点击时才去加载它，而不是在页面初始化时就全部加载进来。这也就是常说的代码分割（Code Splitting）和懒加载（Lazy Loading）。
- 更好的资源管理： 因为是异步的，所以浏览器可以更智能地管理资源优先级，优化网络请求。
挑战：
- 依赖管理和构建工具的依赖： 尽管ESM本身是异步的，但在大型项目中，手动管理所有模块的依赖关系，确保它们按正确顺序加载，会变得非常复杂。这时候，像Webpack、Rollup、Parcel这样的构建工具就成了必需品。它们负责解析模块依赖图、打包、优化，把多个模块合并成少数几个文件，以减少HTTP请求。
- 开发环境和生产环境的差异： 在开发时，你可能直接用
type="module"
，浏览器会单独请求每个模块文件。但在生产环境，为了性能，我们通常会把这些模块打包成一个或几个文件。这种差异需要构建工具来抹平。
- 循环依赖（Circular Dependencies）： 虽然ESM的live binding机制在一定程度上缓解了循环依赖的问题（至少不会像CommonJS那样直接报错），但它依然是一个设计上的“臭味”。如果两个模块A和B互相导入对方，并且在初始化时就依赖对方的导出，可能会导致某些值在被使用时还是
undefined
。这需要开发者在模块设计时就尽量避免。
- 旧浏览器兼容性： 如果你的项目需要支持IE或者一些很老的浏览器，那么ESM是无法直接运行的。你需要使用Babel这样的转译工具，将ESM语法转换成旧浏览器能理解的CommonJS或其他格式。
说白了，ESM的异步加载机制，给了我们巨大的优化空间，但同时也把一部分复杂度推给了构建工具和开发者本身。但我觉得这笔交易是划算的，因为带来的性能提升和开发体验改善是实实在在的。
如何利用ES Module的特性进行代码优化，比如Tree Shaking？
ES Module的静态结构特性，是实现很多高级代码优化的基石，其中最亮眼的莫过于Tree Shaking。
Tree Shaking（摇树优化）：
这个名字很形象，就像摇晃一棵树，把上面枯死的、没用的叶子（代码）摇下来，只留下有用的部分。
- 工作原理： 正如前面提到的，ESM的
import
和
export
是静态的。这意味着在代码执行前，工具就能分析出模块之间的确切依赖关系。当构建工具（如Webpack 4+、Rollup、Parcel）处理ESM时，它们会遍历你的代码，识别出哪些
export
被实际
import
并使用了，哪些则根本没有被引用。那些没有被引用的代码，就会在最终的打包文件中被移除掉。
- 为什么ESM能做到？ CommonJS的
require()
是动态的，你可以在运行时根据条件加载，工具无法在编译时确定所有可能的依赖。比如
const myModule = require(someCondition ? './moduleA' : './moduleB');
，构建工具就很难判断
moduleA
和
moduleB
哪个会被用到。但ESM的
import
语法是固定的，工具可以清晰地构建出依赖图。
- 实际效果： 极大地减小了最终的JavaScript包体积。想象一下，你可能只用了某个大型UI库里的一两个组件，或者某个工具库里的一两个函数，Tree Shaking能确保只有你用到的那部分代码才会被打包进去，而不是整个库。这对于首次加载速度至关重要。
- 实现条件： 要让Tree Shaking有效，除了使用ESM外，还需要注意：
- 模块无副作用（side-effect free）： 如果一个模块在被导入时会执行一些全局操作（比如修改
window
对象），即使它的导出没有被使用，也不能被简单地移除。通常，你需要在
package.json
里通过
"sideEffects": false
来告诉打包工具这个模块是纯净的，可以安全地进行Tree Shaking。
- 构建工具支持： 确保你的构建工具配置了Tree Shaking（现代工具通常默认开启）。
- 模块无副作用（side-effect free）： 如果一个模块在被导入时会执行一些全局操作（比如修改
其他基于ESM的优化：
- 代码分割（Code Splitting）和懒加载（Lazy Loading）： 这是Tree Shaking的孪生兄弟，都是为了减小初始加载体积。利用
import()
动态导入语法，你可以将应用代码分割成多个块，只在需要时才加载它们。例如，一个管理后台，只有管理员登录后才需要加载管理员专属的功能模块。
- 更好的缓存策略： 因为代码被分割成更小的、独立的块，当某个模块内容更新时，只有对应的代码块需要重新下载，其他未改变的模块可以继续使用浏览器缓存，进一步提升二次加载速度。
- 更清晰的依赖图： ES Module的静态导入让依赖关系一目了然，这不仅对构建工具友好，对开发者理解项目结构、排查问题也大有裨益。当你看一个文件的
import
语句时，你就知道它依赖了什么，这比CommonJS那种散落在文件各处的
require
要清晰得多。
总的来说，ES Module不仅仅是一种新的模块化语法，它更是一种现代JavaScript应用架构和性能优化的基础。理解并善用它的特性，能让你的项目在性能和可维护性上都迈上一个新台阶。
评论（已关闭）
评论已关闭