JavaScript 번들링 설명
React 또는 Angular 앱을 작성할 때는 많은 파일을 사용합니다. 컴포넌트, 서비스, 라이브러리를 활용하게 됩니다.
브라우저는 파일이 너무 많으면 성능 저하를 겪습니다. 200개의 파일을 로드한다는 것은 200번의 네트워크 요청을 의미하며, 이는 앱을 느리게 만듭니다.
번들러(Bundler)가 이 문제를 해결합니다. 번들러는 작성한 코드와 import 문을 가져와 하나 또는 몇 개의 작은 파일로 결합합니다. 이를 통해 로딩 효율을 높입니다.
현대적인 번들러는 단순히 파일을 결합하는 것 이상의 역할을 수행합니다. 다음과 같은 작업들을 처리합니다:
- Minification: 공백과 주석을 제거합니다. 공간을 절약하기 위해 변수 이름을 축약합니다.
- Tree shaking: 사용하지 않는 코드를 제거합니다.
- Code splitting: 코드를 작은 청크(chunk)로 나눕니다. 사용자는 필요한 부분만 로드하게 됩니다.
파일 크기가 작아지면 앱 속도가 빨라집니다.
두 가지 주요 도구가 있습니다: Webpack과 Vite입니다.
Webpack은 앱을 서빙하기 전에 전체 앱을 번들링합니다. 강력하고 유연하지만, 변경 사항이 생길 때마다 모든 것을 다시 번들링하기 때문에 대규모 프로젝트에서는 느리게 느껴질 수 있습니다.
Vite는 현대적인 선택지입니다. 개발 중에는 네이티브 ES modules를 사용하여 파일을 직접 서빙합니다. 변경한 파일만 업데이트하므로 업데이트가 즉각적입니다.
비교:
Webpack:
- 개발 속도: 느림
- 설정: 복잡함
- 적합한 용도: 대규모 레거시 프로젝트
Vite:
- 개발 속도: 빠름
- 설정: 간단함
- 적합한 용도: 새로운 현대적 프로젝트
새로운 프로젝트에는 Vite를 사용하세요.
모든 번들러는 다음 세 단계를 거칩니다:
- 의존성 그래프(Dependency graph) 구축: 번들러가 파일들이 서로 어떻게 연결되어 있는지 매핑합니다.
- 코드 변환: TypeScript 또는 JSX를 순수 JavaScript로 변환합니다.
- 번들 출력: 배포를 위해 최종 파일을 폴더에 작성합니다.
다음 팁을 활용하여 번들을 가볍게 유지하세요:
- Lazy loading: 사용자가 필요로 할 때만 컴포넌트를 로드합니다.
- Specific imports: 라이브러리 전체를 가져오지 마세요. 사용하는 특정 함수만 가져오세요.
- 번들 분석: 도구를 사용하여 어떤 파일이 가장 많은 공간을 차지하는지 확인하세요.
- 프로덕션 빌드 사용: 개발용 빌드 대신 항상 프로덕션 빌드를 배포하세요.
번들러는 더 적고 작은 파일을 제공함으로써 앱을 더 빠르게 만듭니다.
출처: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p