번들링이란?
번들링은 모듈들 간 의존성 관계를 파악하여 그룹화하는 작업이다.
수많은 모듈을 브라우저 내에서 로딩하게 되면 네트워크 속도 저하, 모듈 간 변수 충돌 등 위험성이 있기 때문에 미리 모듈을 묶어 주는 것이다.
CommonJS, AMD, UMD, ES6 모듈 등 다양한 모듈 명세가 존재한다.
Webpack은 모든 모듈 명세를 지원하고, 다양한 장점이 있기 때문에 가장 인기 있는 번들링 툴이다.
Webpack의 장점
성능 최적화 & 자동화
사용하지 않는 코드를 제거하는 Tree Shaking과 같은 최적화를 수행하여 HTTP 요청 수를 감소한다.
애플리케이션 임의 조작 방지
번들링되지 않은 원본 코드에 사용자가 접근할 수 있다면, 컴퓨터를 잘 아는 사용자가 이를 원하는 대로 조작할 위험이 생긴다.
번들링된 웹 애플리케이션은 사용자가 임의로 조작할 수 없다.
편의성
Sass나 Stylus, 또는 TypeScript를 사용할 때 번들러가 컴파일 과정에서 필요한 플러그인을 추가하고 번들링 해 준다.
Code Splitting
필요할 때 모듈을 로딩하는 Dynamic Loading, Lazy Loading이 가능하다.
Reference
Software Engineer 🍊