What is the difference between CommonJS and ES modules

Short answer

CommonJS uses require() and module.exports and loads modules synchronously. ES modules use import and export and support static analysis, tree shaking, and asynchronous loading.

Key differences

• Syntax: CommonJS uses const x = require('x') and module.exports = x. ES modules use import x from 'x' and export default x.
• Loading: CommonJS loads and executes modules synchronously at runtime. ES modules are parsed statically, enabling better optimization.
• Top-level await: ES modules support await at the top level; CommonJS does not.
• File extension: ES modules typically use .mjs or "type": "module" in package.json.
• Tree shaking: ES modules allow bundlers to remove unused code because imports are static.

When to use each

• Use CommonJS for legacy Node.js projects and when you need dynamic requires.
• Use ES modules for modern applications, frontend projects, and when you need static analysis and tree shaking.
• Node.js is moving toward ES modules as the standard for new projects.