Bundling Fundamentals
Updated
•1 min read들어가며
프론트엔드에서 번들링을 이해하는 과정은 웹 성능 최적화를 위해서 꼭 짚고 넘어가야할 부분이다.
토스에서 작성해둔 bundling Fundamentals 과정을 통해서 번들링이 '어디서 어떻게' 일어나는지 함께 이해해보자!
번들링이란
번들링은 여러개의 웹 개발에 필요한 리소스 파일들을 하나 또는 몇 개의 파일로 묶는 작업을 얘기하고, 이렇게 묶인 파일을 번들(bundle) 이라고 부른다.
번들링의 목적
수십, 수백개의 파일을 하나로 묶어서 브라우저가 요청해야 할 파일 수를 줄이면 로딩 속도가 향상되고, 하나의 파일만 브라우저에서 캐시하면 되기에 캐싱에 최적화된다. 또한 개발할 때는 모듈화 된 파일로, 배포될 때는 번들된 파일을 사용하기 때문에 성능 최적화에 도움이 된다(당연하게도)
번들링의 과정
번들러가 서로 의존중인 파일 관계를 분석한다 (시작지점:index.js) 부터 출발해 모든 필요한 파일을 찾고, 의존성 그래프를 그린다
하나의 파일로 묶는다
추가 최적화 작업을 한다 (사용되지 않는 코드 제거, 필요한 경우 코드 스플리팅, 공백과 주석을 없애 크기를 줄인다)
최종 결과물을 배포한다. bundle.js 파일을 서버에 올려 사용자는 브라우저로 빠르게 접근한다.