[Node.js] CJS 와 ESM의 차이

CJS와 ESM의 차이점

CJS에서는 require와 module.exports를 , ESM에서는 import와 export를 사용한다.

 

둘은 같이 사용될 수 없다! 

 

예시 (CommonJS)

//index.js
const { add, sub } = require("./math")
console.log(add(1,2))
console.log(sub(1,2))

//math.js
function add(a,b) {
    return a+b;
}

function sub(a,b){
    return a-b;
}

module.exports ={
     add,
     sub,
}

 require와 파일경로를 입력해 모듈을 불러오는 방식

 

장점

CommonJS는 동기적 로드 방식을 사용하기 때문에, 서버 사이드 렌더링과 같은 환경에서 유리하다.

서버 사이드에서는 모든 모듈이 로드된 후에야 코드가 실행되기 때문이다.

 

단점

트리 셰이킹이 어렵다는 단점이 있다. 이는 사용되지 않는 코드를 제거하기 어렵게 만든다. 왜냐하면 CommonJS는 동적 로드를 지원하기 때문이다.

 

예시 (ESModule)

//index.js
import {add,sub} from "./math.js";

console.log(add(1,2))
console.log(sub(1,2))

//math.js
function add(a,b) {
    return a+b;
}

function sub(a,b){
    return a-b;
}
export{ add , sub }

import와 export로 모듈을 불러오고 내보냄(확장자 명 필수)

package.json에 "type":"module" 을 명시해주어야 한다.

 

예시2

export function add(a,b) {
    return a+b;
}

export function sub(a,b){
    return a-b;
}

//export{ add , sub }

export를 빼고 function 앞에 export를 명시해 주어도 된다.

 

예시3

//index.js
//multifly 함수는 이름을 바꾸어서 호출 가능 (중괄호 생략 필수)
//이런식으로 쉼표를 이용해 같은 모듈의 파일을 한줄로 한번에 불러올 수 있음
import mul , {add,sub} from "./math.js";

console.log(add(1,2))
console.log(sub(1,2))
console.log(mul(1,4))

//math.js
export function add(a,b) {
    return a+b;
}

export function sub(a,b){
    return a-b;
}

//default - multifly 함수는 함수의 기본값을 설정할수있음
export default function multifly(a,b){
    return a*b
}

 

장점

ESM은 정적 분석이 가능하기 때문에, 트리 셰이킹이 용이하다.

이는 사용되지 않는 코드를 제거하여 번들 크기를 줄이는 데 유리하다!

 

 ESM은 브라우저 환경에서 비동기 로드를 지원한다. 이것은 곧 브라우저에서 모듈을 로드할 때 페이지 로딩 속도를 저하시키지 않는다는 말

 

차이점 정리

CommonJS는 동기적으로 모듈을 로드하는 반면, ES Module은 비동기적으로 로드한다.

이는 ES Module이 브라우저 환경에서도 사용될 수 있도록 설계되었기 때문이다.

 

CommonJS는 트리 셰이킹(Tree Shaking)이 어렵다는 단점이 있다.

반면, ES Module은 트리 셰이킹이 용이하다. 왜냐하면 ES Module은 정적 분석이 가능하기 때문이다.