Web Bundler(Webpack)

번들러가 없던 웹사이트의 문제점

1. 중복된 이름으로 인한 충돌
   • 하나의 웹사이트에 여러 개발자가 함께 공동 개발하기 때문에 함수명과 변수명이 충돌하는 위험이 존재합니다.
2. 느린 파일 전송 속도
   • 웹 애플리케이션을 구성하는 파일의 양이 많을수록 사용자에게 해당 파일을 제공하는 시간이 오래 걸리게 됩니다.
   • 파일 하나당 크기가 크다면 요청한 웹 서비스를 받기까지 상당히 오랜 시간 기다려야 합니다.

Bundler

위의 문제점을 해결하기 위해 여러 개의 파일을 하나로 묶어서 최적화된 형태로 전송하고,
웹 애플리케이션의 성능을 향상시켜줍니다.

번들링 장점

1. 네트워크 성능 개선
   이전에는 각 파일마다 서버에 요청하여 자원을 얻어와야 했지만
   같은 타입(ex. html, css, js)의 파일을 묶어서 요청/응답을 받기 때문에 HTTP 요청의 수를 줄이고 네트워크적으로 비용이 줄어들게 됩니다.

2. 리소스 최소화 및 브라우저 캐싱을 통한 페이지 로딩 속도 개선
   여러 개의 파일을 묶어 하나의 번들로 만들 때 파일끼리의 연관관계(종속성, 의존성) 을 알아서 확인하여 사용하지 않은 파일은 포함하지 않기 때문에, 번들의 크기가 줄어들고
   변경된 모듈만 새로 다운로드하고 나머지는 캐시를 활용하여 로드할 수 있어 페이지 로딩을 더욱 빠르게 합니다.

3. 모듈 간의 의존성을 파악하여 최적화된 순서 적용

// 모듈 X
import { funcY } from './moduleY';
export function funcX() {
  return funcY();
}

// 모듈 Y
import { funcZ } from './moduleZ';
export function funcY() {
  return funcZ();
}


// 모듈 Z
export function funcZ() {
  return 'Hello from module Z';
}

이 경우, 번들러는 다음과 같은 순서로 모듈을 번들로 묶을 수 있습니다:

1. 모듈 Z 번들링: 모듈 Z는 다른 모듈에 의존하지 않으므로 먼저 번들링됩니다.
2. 모듈 Y 번들링: 모듈 Y는 모듈 Z에 의존하고 있으므로, 번들러는 모듈 Z의 번들이 먼저 로드되도록 순서를 조정하여 모듈 Y를 번들링합니다.
3. 모듈 X 번들링: 마찬가지로 모듈 X는 모듈 Y에 의존하고 있으므로, 번들러는 모듈 Y의 번들이 먼저 로드되도록 순서를 조정하여 모듈 X를 번들링합니다.

이런 식으로 번들러는 모듈 간의 의존성을 파악하여 최적화된 순서로 모듈을 번들로 묶어줍니다.

References

[Web] 번들러(Bundler)의 개념과 필요성

모듈번들러를 사용하면 왜 어플리케이션의 성능이 향상될까?