32. 빌드 도구(Build Tools) - 2

번들링(Bundling)과 트리 쉐이킹(Tree Shaking)

번들링과 트리 쉐이킹은 모두 프론트엔드 개발에서 자바스크립트 코드를 최적화하는 데 중요한 기술입니다. 이 블로그에서는 각각의 개념과 실제 코드 예제를 통해 그 원리와 활용 방법을 알아보겠습니다.

1. 번들링(Bundling)

개념:

번들링은 여러 개의 소스 파일을 하나의 번들로 묶는 과정을 말합니다. 이 과정에서는 여러 모듈 간의 의존성을 해결하고, 코드를 최적화하여 브라우저가 이해할 수 있는 형태로 변환합니다.

코드 예제:

// index.js
import { add } from './math';

console.log(add(3, 5));

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

번들링 결과:

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

console.log(add(3, 5));

2. 트리 쉐이킹(Tree Shaking)

개념:

트리 쉐이킹은 번들링 과정에서 사용되지 않는 코드를 제거하는 최적화 기법입니다. 이를 통해 번들 파일의 크기를 줄이고 성능을 향상시킬 수 있습니다.

코드 예제:

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

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

// index.js
import { add } from './math';

console.log(add(3, 5));

트리 쉐이킹 결과:

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

console.log(add(3, 5));

결론

번들링과 트리 쉐이킹은 모두 프론트엔드 개발에서 코드를 최적화하는 중요한 기술입니다. 번들링을 통해 여러 모듈을 하나로 묶고, 트리 쉐이킹을 통해 사용되지 않는 코드를 제거하여 번들 파일의 크기를 줄일 수 있습니다. 이를 통해 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.