Module bundler
Module
모듈 번들러 : Module + Bundling -> 분리된 코드 조각 묶기
Module : 분리된 코드 조각
모든 코드를 한 개의 파일에 작성하는 대신 기능(변수,객체, 배열, 함수, 클래스 등)
에 따라 별도의 파일에 코드를 분리할 수 있다.
코드를 분리하는 기준에 따라 파일이 많아질 순 있지만, 한 개의 파일에 코드를 작성하는 것보다 체계적 + 유지보수성 증가
결국 모듈은 분리된 파일을 의미한다. JS에서 현재 모듈을 다든 모듈에서 접근 할 수 있도록 export 키워드를 사용하며, 분리된 모듈을 불러오기 위해 import 키워드를 사용한다.
모듈 번들러의 필요성
많은 모듈을 하나로 묶는 과정은 쉽지 않으며, 변수 또는 함수 이름이 중복되는 경우 그리고 모듈간 종속성 때문에 배포하기 전부터 수많은 에러를 발생시킬 수 있음
모듈간 종속성이란
A.js파일은 B.js를 import 하고 B.js파일은 C.js파일을 import하고.A.js (import B.js)
B.js (import C.js
C.js (import ...)
이렇게 모듈끼리 서로 종속되는 것을 의미하며, 모듈간 종속성이 복잡한 경우, 어떤 모듈에서 문제가 발생했는지 추적하기 쉽지 않다.
Module bundler
모듈 번들러는 위에서 언급한 모든 문제를 해결해 짧은 시간에 최상의 성능을 위해 App을 최적화하는 개발도구이다.
모듈 번들러의 핵심 작업은 여러 JS파일을 하나로 결합해 단일 파일을 만드는 것이다.
따라서 크롬과 같은 브라우저는 하나의 단일 파일을 로드함으로써 App이 동작한다.
모듈 번들러는 JS파일뿐만 아니라 CSS, 이미지, 폰트 등 여러 리소스에 대해서도 번들링 된다.
모듈 번들러는 Webpack, Rollup처럼 다양한 개발 도구가 존재하며 번들링 동작 방식은 개발 도구마다 다르다.
참고
