번들러

안녕하세요! AT SOPT WEB 36기 YB 황인영입니다.

 

 

과거의 웹 애플리케이션은 지금보다 크기와 복잡성이 적었기 때문에 하나의 스크립트나 적은 수의 스크립트로도 충분히 유지보수가 가능했다고 합니다.

 

하지만 현대의 웹 애플리케이션은 복잡도가 증가하면서 수많은 자바스크립트 파일과 모듈을 포함하게 되었습니다. 브라우저는 필요한 리소스를 네트워크를 통해서 받아오는데, 필요한 파일들이 많아지면 그만큼 많은 파일을 불러와야하기 때문에 문제가 발생할 수 있습니다.

 

먼저, 많은 파일을 개별적으로 요청하면 HTTP 요청이 많아지고, 그에 따라 웹 페이지 로딩 속도가 느려지게 되고 동시 전송 문제 등이 사용자 경험에 영향을 줄 수 있습니다. 또한 각 파일이 서로 의존 관계가 있는 경우, 파일의 로드 순서가 제대로 관리되지 않는 문제가 발생할 수 있습니다. 어떤 파일이 다른 파일을 필요로 하는데, 해당 파일이 아직 로드되지 않은 경우 에러가 발생할 수 있습니다.

 

이러한 배경으로, 파일을 하나로 합친다는 개념의 번들러가 등장하게 되었습니다.

 

 

번들러에 대해 알아보기 전에.. 모듈에 대한 개념을 잠깐 짚고 넘어가겠습니다.

개발하는 애플리케이션 크기가 커지면 파일을 여러개로 분리하게 되는데, 분리된 파일 각각을 모듈이라고 합니다.
모듈을 사용하면 index.html에서 모든 js 파일을 가져올 필요 없이, main.js에 필요한 파일들을 모두 import 하였다면 index.html에서는 main.js만 가져오면 됩니다.

 

번들러는 다음과 같은 기능을 제공합니다.

 

1. 모듈 코드를 하나 또는 여러개의 파일로 묶기

번들러는 파일끼리 종속성을 알아서 확인하여 묶어줍니다. 또한 하나의 JS 파일로 번들링해주었기 때문에 한번의 네트워크 요청으로 웹 페이지를 로드할 수 있습니다.

 

2. 성능 향상을 위한 추가 기능을 제공

- Tree-Shaking

애플리케이션이 커지고 시간이 지남에 따라 사용하지 않는 모듈들이 제거되지 않는 경우가 생길 수 있습니다.

이를 해결하기 위해 사용하지 않는 불필요한 코드를 최종 빌드 결과물에서 제거해 용량을 최적화하는 기법이 tree-shaking입니다.

 

- HMR (Hot Module Replacement)

코드가 변경되면 이를 감지하고 브라우저에 최신 코드를 반영하여 자동으로 모듈을 교체합니다.

개발자는 이를 통해 새로고침하지 않아도 반영된 것을 빠르게 확인할 수 있어 개발 효율성이 증가합니다.

 

- Code Splitting

번들을 모두 하나로 통합하는 것이 아닌, 하나의 큰 번들을 여러개의 번들로 쪼개고 필요한 경로에만 제공하여 최적화를 시킵니다.

 

 

 

번들러의 작업은 두 단계로 나뉩니다.

 

1. 의존성 그래프 생성

2. 번들링

 

entry는 번들러가 어떤 파일부터 분석을 시작할지 지정하는 진입점(entry point)입니다.

번들러는 entry에서 시작해서 해당 파일이 import/export하거나 require하는 모든 파일들을 재귀적으로 따라가며, 모듈 간의 연결 관계(의존성)를 분석합니다.

이 과정에서 생성되는 것이 바로 의존성 그래프(dependency graph)*니다. 이 그래프는 모듈 간의 연결 관계를 하나의 큰 트리 형태로 나타냅니다.

번들러는 이 의존성 그래프를 기반으로 모든 필요한 모듈들을 하나의 파일(또는 여러 파일)로 묶은 번들(bundle)을 생성하고, 이를 output 설정에 따라 저장합니다.

 

 

 

번들러는 Webpack, Vite 등 여러가지가 있는데,, 프로젝트 요구사항과 개발환경, 그리고 각 번들러의 특성과 장점을 생각해서 적합한 번들러를 선택하는 것이 중요할 것 같습니다~~