CommonJS 의 트리쉐이킹(tree shaking)이 효율적이지 않은 이유

• CoomonJS 의 동적 특성과 모듈 사용방식 때문이다.

CommonJS 의 특징

1. 동적 require

• commonJS 에서는 모듈을 require 함수를 통해 동적으로 가져올 수 있다.
• Common JS의 증분 로딩(incremental loading)

const moduleName = 'some-module';
const someModule = require(moduleName);

• 이러한 동적 require 호출은 정적 분석이 어렵다. 번들러는 실행 시점까지 어떤 모듈이 로드 될 지 알수 없기 때문에 불필요한 코드 제거가 어렵다.

2. 모듈 전체 가져오기

• CommonJS 에서는 모듈 전체를 가져와서 사용하게 된다.

const myModule = require('./myModule');
const result = myModule.someFunction();

• 이 경우 myModule 의 모든 내용이 가져와지기 때문에, 실제로 사용되지 않는 부분도 번들에 포함된다.

3. exports 객체의 동적 조작

• commonJS 에서는 module.exports 나 exports 객체를 동적으로 조작할 수 있다.

if (condition) {
  module.exports = require('./moduleA');
} else {
  module.exports = require('./moduleB');
}

• 이러한 동적 조작은 번들러가 어떤 코드가 실제로 사용될지 분석하기 어렵게 만듦.

반면..ES moudle 은

ESM의 특징

1. 정적 구조

• ESM은 정적인 import 와 export 구문을 사용한다.
• 이는 컴파일 타임에 모듈 간의 의존성을 명확히 알 수있다는 의미.

import { specificFunction } from './myModule';
specificFunction();

• 이러한 정적 구조 덕분에 번들러는 specificFunction 만 가져오고, myMoudle 의 나머지 부분은 번드렝서 트리쉐이킹 가능

2. NamedExports

• ESM은 여러개의 named exports 를 지원한다. 이는 필요한 부분만 선택적으로 가져올 수 있다.

// myModule.js
export function specificFunction() { /* ... */ }
export function anotherFunction() { /* ... */ }