모듈과 번들, 그리고 번들링 도구(webpack, vite ⋯)

모듈(module)

= 분리된 코드 조각
모듈은 서로 의존성을 띄고 있어서 다음과 같은 문제가 있음

• 수많은 모듈의 순서를 어떻게 처리할지? (의존성 처리)
• 모듈이 많아질 수록, HTTP 요청이 많아질텐데 이로 인한 오버 헤드?

  해결 방안
  : 모듈 번들러!

##모듈 번들러
분리된 코드 조각을 하나로 병합하는 개발 도구
JS, CSS 파일 등 여러 리소스를 하나로 결합하여 단일 파일을 만듦
브라우저는 하나의 단일 파일만 로드 -> 애플리케이션 동작

번들(bundle)

웹 개발 및 프엔 개발 용어
여러 파일을 하나로 결합하는 작업

하나의 파일로 결합하는 걸 "번들링"이라고 함
번들링은 주로 JS, CSS 파일을 하나의 파일로 결합하는 걸 의미

-> 웹 애플리케이션의 성능을 최적화하고 관리를 더 쉽게 만듦

사용하는 이유

번들링: 모듈들의 의존성을 파악하여 그룹화

분리되어 있는 모듈을 하나로 합쳐주는 것 = 번들
export로 내보내기도, import로 가져오기도 함

여러 모듈을 그대로 사용하지 않고 번들링을 사용하는 이유

• 성능 향상
• 코드 숨김
• 코드 최적화
  HTTP 요청 수가 감소하여 네트워크 비용 감소
• 한 번의 요청으로 파일을 받아올 수 있기 때문에 로딩 속도에서의 이점
• JS 압축, CSS 전처리기 변환과 같은 작업의 자동화

즉, 웹 애플리케이션의 성능을 향상시키고, 코드 관리 & 보안을 개선하는 개발 프로세스

번들 크기를 최소화 하기 위해

• 코드 최적화
• 불필요한 의존성 제거
• 코드 스플리팅 (필요한 코드만 로드하도록 모듈 분할)
  및 트리 쉐이킹 (사용되지 않는 코드 제거)

웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선할 수 있음
그래서 번들 크기를 모니터링하고 최적화하는 것은 웹 프엔 개발에서 중요!

번들링 도구

번들 크기를 최소화해서 웹 애플리케이션의 성능을 향상시키고, 코드 유지 관리를 용이하게 하는데 유용

• Webpack (최신 프론트엔드에서 가장 많이 사용됨)
• Parcel
• Rollup

Webpack vs Vite

변화가 매우 빠른 프론트엔드 업계에서는 이 기술이 최선일지 항상 의심하고 또 의심해야 함...
Vite란 이름의 뜻 그대로 "빠른" 자바스크립트 번들링 툴으로, esbuild 번들링을 통해 개발 환경에서 높은 속도를 자랑함

개발 서버
Webpack: 소스 코드와 모든 종속 관계의 모듈을 번들링 한 후 서버가 준비됨
Vite: esbuild로 미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동됨

출처: https://enjoydev.life/blog/frontend/4-module-bundler