안녕하세요. 오늘은 Webpack을 사용하는 이유에 대해 말해보고자 합니다.
현재 프론트엔드 개발에 있어서 널리 퍼진 방식은 하나의 html 파일에 많은 JS파일들을 불러오는 방식을 택하고 있습니다.
프로젝트의 크기가 커지면서 모듈화의 중요성이 커졌기 떄문이죠.
그래서 import와 파일의 갯수는 많아지게 됩니다.
여기서 생기는 문제점이 있습니다.
각각의 파일들에 대한 HTTP 요청이 많다는 것입니다.
물론 각 파일의 용량이 크지는 않습니다.
하지만 모든 HTTP 요청은 어느정도의 기본 시간이 걸립니다.
파일 다운로드에 걸리는 기본 시간이 존재한다는 것입니다.
위 사진은 Webpack을 적용하지 않은 현재 저의 프로젝트의 네트워크 탭입니다.
각 파일의 크기는 그리 크지 않지만 여러 개의 파일로 나뉘어 있어서 기본 요청 시간이 누적되는 현상이 발생합니다.
그래서 파일 다운로드가 빨리 진행되어도 서버 작업에서 파일을 준비하는데 시간이 걸립니다.
현재는 로컬 개발 환경이지만 만약 웹에 배포했다면 이렇게 요청이 많아졌을 때 지연시간이 길어지고 프로젝트가 느려질 수 있습니다.
<script src="/js/vendor/vendor01.js"></script>
<script src="/js/module01.js"></script>
<script src="/js/lib/library01.js"></script>
<script src="/js/module02.js"></script>
<script src="/js/module03.js"></script>
한편, 자바 스크립트는 기본적으로 전역 범위를 가집니다. 어디서든 접근이 가능하다는 의미입니다.
이는 프로젝트가 커졌을 때 같은 이름의 변수가 의도치 않은 값을 할당하는 문제를 일으킵니다.
여기서 HTTP 요청을 줄이고 의존성을 해결해주는 도구로 웹팩이 나옵니다.
웹팩은 번들링 도구입니다.
한마디로 여러 코드를 한 파일에 묶어 놓게 해주는 도구라고 생각하면 됩니다.
많은 JS 파일들을 하나의 JS 파일로 묶어놓는다는 의미이죠.
파일이 하나로 줄었으니 HTTP 요청은 줄게 됩니다.
그리고 웹팩은 코드 최적화 작업도 해줍니다. 참 고마운 아이죠.
댓글