[WEB] 번들러

번들러란?

• bundle : 묶다
• 즉, 웹 애플리케이션에 필요한 모듈화된 자원들(HTML, CSS, JS 등)을 하나/최적의 소수의 파일로 묶어주는 도구
• Webpack, Parcel, Rollup 등

역할

• 불필요한 주석이나 공백 제거, 난독화, 파일 압축 등의 기본적인 작업
• 최신 문법이나 기타 개발에 편리한 특수 기능 등을 브라우저가 지원하는 형태로 변환
• 개발자의 작업 효율성을 높인다.
• 브라우저의 호환성이나 성능 등을 개선

Webpack

• 대표적인 자바스크립트 번들러

기능

• 모듈 번들링(Module Bundling): 진입점에 연결된 파일을 단일 파일로 묶어줍니다.
• 번들 최적화(Automatic Bundle Optimization): 번들 최적화를 통해, 보다 더 작은 번들을 생성하고 그만큼 빠르게 로딩할 수 있습니다.
• 코드 스플리팅(Code Splitting): 모듈을 청크(chunk)로 분리하여, 동적으로 필요한 모듈만 로딩할 수 있습니다.
• 트리 쉐이킹(Tree Shaking): 사용되지 않는 코드를 제거해 번들의 크기를 줄이고 성능을 향상시킬 수 있습니다.
• 개발 서버 실행(Development Server): 코드가 변경될 때마다 브라우저에 반영(HMR)되는 개발용 서버를 실행할 수 있습니다.

---

조금 다른 주제일 수 있지만 Vite와 같이 평소 사용했던 빌드 툴들과 번들러의 차이를 한 번 정리하고 싶어서 빌드 툴에 대해서도 간단하게 정리해본다.

빌드 툴

• 프로젝트 빌드 과정의 전체적인 흐름을 관리하기 위한 도구
• 보통 번들러를 기본 포함하고 개발 서버나 린팅, 테스트 등의 추가로 개발에 필요한 여러 도구를 가지고 있음.

Vite

• Vue.js 프로젝트를 위해 시작되었지만, React나 Svelte 같은 다른 프레임워크에서도 사용할 수 있도록 확장
• 프로젝트 크기와 상관없이 최고의 빠른 속도를 유지하는 개발 서버를 제공(HMR)
• JSX, TS, TSX, SCSS 등을 추가 구성없이도 즉시 지원
• 개발 서버와 제품 빌드 간의 차이가 없도록 최적화됨

Vite의 번들러

• ESM(ES Module) 방식은 대부분의 브라우저 환경에서 지원되지만, 개발 모드가 아닌 제품 모드에서 ESM 방식만 사용하는 것은 중첩 가져오기 등의 문제로 비효율적
• 따라서 코드 스플리팅, 트리 쉐이킹 등의 기능을 위해, 제품 모드에서는 여전히 번들링이 필요하며, Vite 내부적으로 Rollup 번들러를 사용

참고자료

번들러와 빌드 도구의 이해

https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/bundler-transpiler.md