번들링 // webpack

 리액트 최신버전에서는 특정 번들링 최적화가 필요없다고 이야기는 하지만 또 어떤 부분에 있어서는 번들링 최적화를 만져줘야하는 부분이 있다. 예를 들면 lodash의 경우에는 번들링 최적화가 필수적이라고 들었다. 그래서 번들링 최적화 중 가장 많이 들어본 webpack에 대해서 공부를 시작하기로 했다.

그렇다면 번들링이란 무엇일까?

 번들이라는 말에서와 같이 하나로 묶어주는 작업을 이야기하는데, 묶어주는 작업에 있어 모듈들의 의존성 관계를 파악하여 이에 맞게 그룹화해준다.
  그럼 애초에 하나로 작업하면 되지 않나? 하나에서 작업할 때에는 작업의 효율성이 떨어지기 때문에 각각의 기능별로 모듈화를 시켜주게 되었고 이를 하나로 합칠 때에 불필요하게 다 그룹화하는 것이 아니라 의존성이라는 서로의 관계를 고려하여 묶어주는 작업을 하게 되는 것이다.

출처 : webpack

webpack의 공식문서를 보면 아래와 같이 webpack을 설명한다.

webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.

※ 디펜던시 그래프 : webpack은 애플리케이션에서 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드한 다음, 모든 모듈을 브라우저에 의해 로드 되는 작은 수(보통 하나)의 번들로 묶는다.

왜 필요할까?
앞서 설명했듯이 애플리케이션 번들링은 브라우저가 새 요청을 시작하는 동안 앱이 기다려야 하는 횟수를 최소화하고 특히, 코드 스플리팅을 사용하여 좋은 결과를 얻을 수도 있다.

webpack에 대한 기본 가이드 설명은 아래 공식문서 가이드에 친절하게 나와있어 따라하다보면 익힐 수 있다.

Getting Started | 웹팩