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