Bundler

Bundler?

웹 애플리케이션에는 일반적으로 의존성이 있는 많은 모듈들이 있다. 예를 들어 한개의 자바스크립트 모듈이 .JPG, .PNG 등 다른 확장자의 이미지를 가진 다른 자바스크립트 모듈에 의존하는 경우도 있고, Less나 SASS등 CSS preprocessor를 사용해서 의존도가 있는 스타일링 파일들이 존재할 때도 있다.

번들러는 이러한 서로 다른 파일들을 패키지로 결합하고 최적화하는 프로세스를 자동화하는 도구이다. 애플리케이션에 필요한 모든 종류의 파일의 의존성을 받아 모듈 단위의 최소 사이즈 파일 번들로 제공하여 앱 빌드를 돕는데,

1. 전체적인 파일 크기가 작아지므로 네트워크 병목현상이 줄어든다(로드 시간이 빨라진다).
2. 코드가 모듈화되어 유지보수에 도움이 된다.
3. css-loader, sass-loader 등 css 컴파일러를 제공해주기 떄문에 SASS 스타일 preprocessor를 사용할 수 있게 해준다.

주로 사용되는 JS번들러로는 Webpack, Babel, Vite, Esbuild 등이 있다.