번들링(Bundling)이란

번들링(Bundling)

- 여러 개의 자바스크립트 파일, CSS, 이미지, 폰트 등 다양한 자원을 하나 또는 여러 개의 파일로 묶는 과정입니다. 이 과정은 보통 웹 애플리케이션을 최적화하여, 브라우저에서 로딩 속도를 개선하고, 파일의 요청 수를 줄이며, 성능을 향상시키기 위해 수행됩니다.

---

번들링의 주요 목적:

1. 최적화:
   • 여러 개의 자바스크립트 파일, CSS 파일 등을 묶어서 하나 또는 몇 개의 파일로 만듦으로써 HTTP 요청 횟수를 줄입니다. 이는 웹 애플리케이션의 로딩 시간을 크게 개선할 수 있습니다.
2. 성능 향상:
   • **트리 쉐이킹(Tree Shaking)**이나 **코드 스플리팅(Code Splitting)**과 같은 기법을 통해 사용되지 않는 코드를 제거하거나 필요한 부분만 로드할 수 있습니다. 이를 통해 번들 크기를 줄이고 초기 로딩 속도를 빠르게 할 수 있습니다.
3. 배포 편의성:
   • 번들링을 통해 여러 개의 파일을 하나로 묶어 배포하면, 서버에서 자원을 보다 효율적으로 관리하고 제공할 수 있습니다.
4. 캐싱:
   • 번들 파일에 해시값을 포함시키는 방식으로 캐싱을 활용하여, 파일이 변경되지 않으면 브라우저가 이전 파일을 캐시하여 서버의 요청을 줄일 수 있습니다.

---

번들링의 과정

1. 소스 파일 분석:
   • 웹 애플리케이션에서 사용하는 모든 자원(자바스크립트, CSS, 이미지 등)을 분석하여 의존성 관계를 파악합니다.
2. 자원 결합:
   • 의존성 관계를 바탕으로 여러 파일을 하나의 파일(혹은 여러 개의 파일)로 결합합니다. 예를 들어, 여러 자바스크립트 파일을 하나의 bundle.js 파일로 결합합니다.
3. 최적화:
   • 코드 압축(미니파이)와 같은 최적화 작업을 통해 파일 크기를 줄입니다.
   • 트리 쉐이킹(사용되지 않는 코드를 제거)과 같은 기술을 적용하여 번들의 크기를 최소화합니다.
4. 배포:
   • 최종적으로 번들된 파일을 웹 서버에 배포합니다. 이 파일들은 브라우저에서 요청을 받아 처리됩니다.

---

번들링 도구 예시

• Webpack: 가장 널리 사용되는 모듈 번들러로, 자바스크립트, CSS, 이미지 등 다양한 파일을 처리할 수 있습니다. 복잡한 설정을 통해 다양한 기능을 구현할 수 있습니다.
• Vite: 최근 인기 있는 번들러로, 빠른 빌드 속도와 개발 환경을 제공합니다. 기본적으로 ES 모듈을 사용하여 브라우저에서 더 빠르게 빌드를 제공합니다.
• Parcel: 설정 없이 사용할 수 있는 간단한 번들러로, 빠르고 쉬운 사용법이 특징입니다.
• Rollup: 주로 라이브러리 번들링에 사용되는 도구로, 효율적인 트리 쉐이킹을 지원하여 더 작은 번들을 생성합니다.