[기타] 웹팩(webpack)을 사용하는 이유

개발을 하다보면, javascript파일이 많아지기 마련이다.. 다음 HTML파일을 보자.

 

보면 test.js를 순서대로 4개를 가져온다. 근데 보통 프로젝트를 하면 js파일이 적어도 100개에서 수백개까지

늘어난다. 

그럼 어떻게 될까? 코드도 길어지고, 정리하기도 힘들 것이다. 그래서 개발을 하다보면 common.js와 같이

js를 모아놓은 js파일을 만들어 쓰는 경우가 많다.

 

여기를 보면 4개의 js파일들을 testCommon.js다른 곳에서 import하여, HTML에서 쓰고 있다. 그렇다면

네트워크에서는 testCommon.js 하나만 가져올까? 정답은 '땡'이다.

 

testCommon.js까지 해서 5개를 다 가져온다.. 이런 걸 모듈화라고 하는데, 실제로 내가 진행했던 프로젝트도

이렇게 js를 모듈화해서 사용했었다.

 

여기서 라이브러리 중 하나인 웹팩을 쓰는 이유를 알 수 있다. 일단 웹팩이 등장한 배경이

 

1. 파일 단위의 자바스크립트 모듈 관리의 필요성
2. 웹 개발 작업 자동화 도구 (Web Task Manager)
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

이라고 한다. 

 

여기서 내가 제일 눈 여겨 본 게 3번째 였다. 웹팩을 사용하면 서버에 요청하는 파일의 숫자를 줄여서 

부담이 적고, 빠르고 높은 성능을 낼 수 있다고 한다.

아래를 보면 웹팩을 이용해 2개의 js파일을 import해서 가져오지만 실제로 서버에서 가져오는 소스는 1개이다.

 

1. 기존 모듈화

 

2. 웹팩을 통한 번들링

 

위 그림 2개를 비교하면서 보면 이해가 잘 될 것이다. HTML에 붙은 .js 파일의 갯수에 주목해보자.

 

source1과 source2를 생성후 화면에 표출

보면 화면에서는 source1.js와 source2.js 둘 다 뿌려주지만, 실제로 서버에서 가져오는 파일은 bundleWebpack.js

단 하나이다. 지금은 2개이지만, 만약 100개라고 해도 서버에서 가져오는 것은 단 1개이기 때문에

서버의 부담이 적어질 것이다.

 

이것 말고도 웹팩을 쓰면 좋은 이유가 많으니, 아래 링크를 한번 보길 바란다.

 

https://ingg.dev/webpack/

[JS] Webpack을 쓰는 이유