Senior LevelJavaScript & TypeScript
What are ESM vs CommonJS interop issues and tree-shaking optimization strategies?
❓ Interview Prompt: Explain CommonJS require() vs ESM import, dual package hazard, sideEffects flag, and tree-shaking dead code elimination.
Module format differences present integration and bundle size challenges in modern applications:
CommonJS (CJS) vs ES Modules (ESM):
•
CJS (
module.exports / require): Dynamic, synchronous loading. Evaluates modules at execution time. Cannot be easily tree-shaken!•
ESM (
export / import): Static declarative structure. Modules parsed before execution, enabling Tree-Shaking (dead code elimination).Tree-Shaking Optimization Strategies:
1
Use pure ESM modules.
2
Set
"sideEffects": false in package.json to signal to bundlers that unused exports can be safely purged.3
Avoid default exports containing large object literals of methods.
Code Implementation Example
json
// package.json configuration for tree-shakeable library
{
"name": "my-library",
"version": "1.0.0",
"type": "module",
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
}
},
"sideEffects": false
}💡Dual package export mapping and sideEffects: false flag for bundler tree shaking.
🎯 Interview Key Takeaway
Use static ES modules and sideEffects: false in package.json to allow bundlers to tree-shake unused code exports.
#ESM#CommonJS#Tree Shaking#Bundling#Senior
Back to all JavaScript & TypeScript Questions→