Webpack이란?

추후에 웹팩에 대해서는 더 심도있게 다루는 글을 쓸 예정이다.

 

Webpack은 asset bundler이다.

webpack.js.org

보통, 하나의 애플리케이션을 개발하기 위해서는 많은 js, img, css 등 여러 파일들을 사용한다. 코드를 여러 파일로 나눠서 관리하는 것이 큰 애플리케이션 관리에도 이롭다.

그러나, production의 관점에서는 결코 좋지 않다.

 

더 많은 파일들을 다운로드 해야하고, 애플리케이션이 로딩하는 더 많은 시간을 요구하게 된다. 적은 파일로 압축되는 것이 좋을 것 같다. 이러한 최적화 해주는 것이 Webpack이다.

 

Webpack은 다양한 종류의 파일들을 다뤄서, 애플리케이션을 배포할 수 있고 혹은, 개발 서버를 제공해 줄 수 있다.

또한, 3rd party library를 설치하여 webpack을 더 확장할 수 있다.

 

몇 가지 알아둬야하는 상황

- 20kb 파일 vs 2개의 10kb 파일 -> 어떤 것이 더 빠르게 load 할까?

20kb 파일 -> 파일의 크기 뿐만 아니라, 클라이언트 쪽에서의 요청에 대해서 서버가 송출을 하기 전 필요한 파일을 찾는 과정이 있다. 두 개의 파일로 할 경우 더 많은 시간이 걸릴 수 있기 때문에 단일 파일이 더 낫다.