[JS] Webpack을 사용하는 이유

Webpack이 무엇인지 알아보기 전에 Webpack을 사용하는 이유가 궁금했다. 먼저 Webpack을 왜 사용하는지 이해하고 Webpack의 개념과 활용법을 정리해보려고 한다.

---

Webpack의 등장 배경

대부분의 기술들은 기존의 문제들을 해결하기 위해 발전하거나 새롭게 탄생한다. Webpack도 기존의 문제들을 해결하기 위해 개발되었다. 따라서 Webpack의 등장 배경을 알아본 후에 Webpack이 무엇인지 이해할 필요가 있다.

 

기존의 문제점은 다음 4가지이다.

• 자바스크립트 변수 유효 범위
• 브라우저별 HTTP 요청 횟수의 제한
• 사용하지 않는 코드의 관리
• Dynamic Loading & Lazy Loading 미지원

위의 4개의 문제 형태와 Webpack으로 어떻게 해결할 수 있는지 알아봅시다.

 

자바스크립트 변수 유효 범위

변수 유효 범위는 이전에 모듈 시스템을 정리하면서 알아봤다. 두 개의 서로 다른 JS 파일을 로드하더라도 같은 스코프를 공유한다. 때문에 첫 번째 로드한 파일에서 변수 A를 10으로 대입했더라도 마지막 로드한 파일에서 변수 A에 'HELLO'를 대입하면 최종적으로 'HELLO'가 저장되어 오류를 발생시킬 수도 있다. 이 같은 문제는 ES6의 Modules 문법과 웹팩의 모듈 번들링을 통해 해결할 수 있다.

 

브라우저별 HTTP 요청 횟수의 제한

TCP는 한 번에 너무 많은 요청을 서버가 받아서 다운되거나 오류가 발생할 것을 대비하여 브라우저에서 한 번에 서버로 보낼 수 있는 HTTP 요청 횟수에 제한하고 있다. 대표적으로 크롬, 사파리, 파이어폭스 등은 6회, 익스플로러 11은 13회로 제한을 두고 있다.

 

따라서 특정 페이지로 이동했을 때 페이지를 보여주기 위해 필요한 파일들이 여러 개이고 이들이 각각 다른 위치에 있다면 각각의 파일에 대한 요청을 보내야 한다. 이처럼 페이지 로딩에 필요한 파일이 여러 개라면 로딩 시간이 느려질 수 있다. 하지만 Webpack은 여러 개의 파일을 하나로 합쳐서 요청을 최소화하고 최적화가 가능해지도록 한다.

 

 

사용하지 않는 코드의 관리

이 부분은 아직 이해하지 못하였다.

 

Dynamic Loding & Lazy Loading 미지원

특정 페이지에서 필요한 JS 파일을 필요한 순간에 동적으로 불러오기 위해서는 Require.js와 같은 라이브러리를 사용해야 했다. 또한 현재는 불필요한 JS 파일을 나중에 불러오도록 하여 성능 최적화를 해야했다. 이는 Webpack을 통해 코드 분할을 하면서 해결할 수 있다. 

 

JS 파일을 번들링하여 요청 횟수를 줄이는 것이 웹이 빠르게 동작하는데 주요한 기능이 되지만 JS 파일이 많아질수록 번들링의 규모도 커지게된다. 이러한 문제들을 코드 분할을 통해 해결한다.

 

---

참고

https://joshua1988.github.io/webpack-guide/guide.html

Introduction | 웹팩 핸드북