Webpack
최근 Javascript를 활용한 웹 개발 시장이 폭발적으로 커짐에 따라 개발을 편리하게 해주는 다양한 모듈과 라이브러리들이 끊임 없이 등장하고 있다. 개발자들 또한 이러한 트렌드에 맞춰 애플리케이션에 점점 더 많은 모듈을 추가하게 되고 이러한 추세는 브라우저들이 이러한 언어와 개발 방식 등을 이해하기 벅찰 정도가 되었다.
이러한 상황을 타파하기 위해 등장한 것 중 하나가 바로 Bundler (번들러)이다. 아래의 그림에서 볼 수 있듯이 지속적으로 개발되는 모든 모듈을 모든 브라우저가 속도에 맞춰 수용할 수 있게 되는 것은 불가능에 가깝다. 그래서 Bundler는 이러한 모듈들을 브라우저가 이해할 수 있는 Static Assets로 바꿔주는 역할을 한다.
사용하는 이유
모듈 번들링
의존성이 있는 모듈 코드를 하나(또는 여러 개)의 파일로 만들어 브라우저 환경에서 잘 실행될 수 있도록 가공해준다. 즉, 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만든다. 이를 통해 코드를 압축, 최적화할 수 있다.
성능 최적화
웹 사이트를 이용하는 사용자의 입장에서 빠른 로딩은 매우 직관적이고 큰 편의성을 제공한다. 이 속도 개선을 위한 대표적인 노력중 하나가 서버로 요청하는 파일 숫자를 줄이는 것이다. Webpack은 코드 축소와 더불어 사용하지 않는 코드를 제거하는 tree shaking과 같은 최적화를 수행 함으로써 HTTP 요청 수를 감소하여 웹사이트 성능을 궁극적으로 향상한다.
Code Splitting
Webpack은 또한 서버로 요청하는 파일 숫자를 줄이고 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 Lazy Loading 방식과 때에 따라 적절히 모듈을 로딩할 수 있는 Dynamic Loading 방식을 사용한다.
브라우저에 대한 종속석 감소
오래된 버전 브라우저에서는 ES6의 자바스크립트 문법을 사용할 수 없다. 하지만, Webpack의 Babel-loader를 사용한다면 ES6 이상의 자바스크립트 문법을 ES5 버전의 문법으로 변경시켜준다. 따라서, 브라우저 호환성에 신경쓰지 않고 코딩할 수 있다.
내장 개발 서버
게다가 위에 설명한 장점 외에도 다양한 편의 기능을 제공하는데, 프로젝트 파일이 변경 될 때마다 자동으로 컴파일 하는 데 도움이 되는 몇 가지 옵션을 제공한다. webpack-dev-server를 사용하면( CRA로 리액트 애플리케이션을 생성하면 내장되어 있다) 번들링된 모듈을 파일로 생성하지 않고 메모리에 올려 놓은채 빌드 결과물을 보여줌으로써 코드변경시 마다 변경된 결과물을 바로 보여준다.
정리
정리하자면 Webpack이란 점점 발전하며 커지는 웹 애플리케이션을 더 효율적으로 개발하고 실행되도록 도와주는 모듈 번들러이다. 특히 React와 같은 SPA (Single Page Application)을 개발한다면 상황에 맞게 필요한 모듈이 로드되는 Lazy Loading, Dynamic Loading이 매우 큰 역할을 할 것이다.
참고
