번들링과 웹팩, 무엇이고 왜 필요할까?
🎀 번들링(bundling)이란
'묶는다'는 뜻을 가지고 있으며,
사용자에게 웹 애플리케이션을 제공하기 위해 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다.
🤔 번들링은 왜 필요할까
구체적인 사례로 들자면 아래의 것들을 들 수 있다.
- 여러개의 js파일을 사용할때 변수간 충돌을 막을 수 있다.
- 파일을 불러오는 횟수를 줄일 수 있어서 인터넷 속도가 느릴 때에도 좋다.
- 유지보수를 위해 공백이나 주석을 지우지 않아도 배포용 코드에서만 뺄 수 있다.
- 배포 코드를 암호화하여 안전하게 만들 수 있다.
요약해서 말하자면, 번들링은 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 필요하다.
여러개의 파일들이 있다면 그만큼 서버에 요청하고 응답받는 횟수가 많아진다.
그러면 당연히 페이지가 로딩되는 시간이 늦어지고, 그럼 유저가 이탈한다.
다음으로 소개할 웹팩과 같은 번들러를 사용하면 같은 타입의 파일들은 묶어서 요청 밑 응답을 받을 수 있다.
따라서 네트워크 코스트(네트워크를 운영하는 데에 카운트 되는 비용/부담/노력)가 획기적으로 줄어든다.
요즘같은 시대에 번들링은 선택이 아닌 필수인 것이다.
구글에서 제공한 위 데이터를 보면 로딩타임이 1초에서 3초로 등가할 수록 이탈율이 32%, 5초일때 90%, 6초 일때 106%, 10초 일때 123%로 엄청난 속도로 증가하고 있다는 사실을 확인할 수 있다.
🔥 가장 핫한 번들러, 웹팩
이렇게 파일들을 하나로 묶고, 여러가지 편리한 기능을 더해 안전성과 효율성을 높여주는 '번들링' 작업을 하는
프로그램을 '번들러'라고 한다.
현재 번들러 중 가장 많이 쓰이는 것이 웹팩(Webpack)이다.
2위 3위와도 두배 이상 다운로드 수 차이가 나니, 압도적 1위라고 할 수 있겠다. (참고)
유명하다보니, 공식문서도 한글 번역이 잘 되어있다.
웹팩은 정확하게 말하자면, "모듈 번들러"라고 부른다.
모듈 번들러란 HTML, CSS,J avaScript 등의 자원을 전부 각각의 모듈로 보고
이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다.
여기서 주의할 점은 웹팩이 HTML, CSS, 혹은 .jpg나 .png 같은 이미지 파일들도 전부 모듈로 치고 있다는 점이다.
웹팩의 주요 구성 요소인 로더(loader)를 통해 다양한 파일도 번들링이 가능하다고 한다.
🔨 빌드와 번들링
빌드는 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업을 말한다.
npm run build를 통해 개발이 완료된 리액트 프로젝트를 번들링하면
index.html에 배포에 최적화되어 압축된 상태를 제공해준다.
결국 번들링하여 파일들을 연결하는게 곧, 빌드인 것이다.
🔗 이어지는 글