SPA(싱글 페이지 애플리케이션)에서는 번들링이 필수라는 걸 누구나 알고 있습니다.
하지만 MPA(멀티 페이지 애플리케이션)에서는 각 페이지가 독립적으로 로드되기 때문에
“번들링이 꼭 필요할까?”라는 의문이 생깁니다.
정답은 필수는 아니지만, 상황에 따라 매우 유용하다는 것입니다.
그 이유를 하나씩 쉽게 살펴보겠습니다.
1. 여러 페이지에서 공통으로 사용하는 코드가 많을 때
MPA에서는 보통 페이지마다 HTML과 JS를 따로 가지고 있습니다.
예를 들어, about.html에는 about.js를, contact.html에는 contact.js를 연결합니다.
그런데 페이지마다 jQuery나 axios 같은 라이브러리,
또는 직접 만든 utils.js 같은 공통 파일을 함께 불러온다면 어떻게 될까요?
브라우저는 매번 같은 JS 파일을 다시 다운로드하려고 합니다.
서버 캐시가 있어도, 요청 자체는 계속 일어나기 때문에 로딩 시간이 늘어납니다.
이럴 때 번들러를 사용해서 공통 코드를 따로 묶어두면 효율이 훨씬 좋아집니다.
예를 들어 vendor.js라는 파일 하나에 공통 모듈을 모아두면,
브라우저는 이 파일을 한 번만 받아 캐시에 저장하고
다음 페이지부터는 네트워크 요청 없이 즉시 불러옵니다.
즉, 공통 코드의 중복 다운로드를 막고, 전체 사이트의 로딩 속도를 높일 수 있는 것입니다.
번들링은 일종의 “공용 장바구니” 같은 역할을 합니다.
매번 새 장바구니를 사지 않고, 한 번 산 장바구니를 계속 사용하는 셈이죠.
2. ES6 모듈(import/export)을 사용할 때
요즘 JS 개발에서는 import와 export를 이용해 코드를 나누고 관리합니다.
이 방식은 깔끔하지만, 구형 브라우저에서는 작동하지 않습니다.
또 여러 파일 간의 의존 관계를 사람이 직접 <script> 태그로 연결하려면
순서를 맞추기가 매우 번거롭습니다.
이 문제를 번들러가 대신 해결해줍니다.
webpack이나 Vite 같은 도구는 여러 JS 파일을 분석해
모듈 간 관계를 파악하고, 필요한 순서대로 하나의 파일로 묶어줍니다.
또 Babel 같은 트랜스파일러와 함께 사용하면,
최신 문법(import, async/await)을 지원하지 않는 브라우저에서도
문제가 없도록 자동 변환해줍니다.
번들러는 여러 작가의 원고를 한 권의 책으로 편집하는 “편집자” 같은 역할을 합니다.
그리고 Babel은 그 책을 현대 맞춤법으로 교정해주는 “교정자”와도 같습니다.
3. 코드 압축, 난독화, Tree-shaking 등 최적화
번들링의 또 다른 이유는 성능과 보안입니다.
개발 중에는 사람이 보기 편하게 코드를 작성하지만,
배포할 때는 빠르고 안전하게 실행되는 것이 중요합니다.
(1) 코드 압축 (Minify)
공백, 줄바꿈, 주석, 긴 변수명 등을 모두 제거해 파일 크기를 최소화합니다.
예를 들어,
function add(a, b) {
return a + b;
}
는 아래처럼 줄어듭니다.
function a(n,o){return n+o}
이렇게 하면 파일 용량이 줄어들어 브라우저 로딩 속도가 빨라집니다.
(2) 난독화 (Obfuscation)
코드를 일부러 읽기 어렵게 바꿔서,
누군가 소스를 복사하거나 분석하기 어렵게 만듭니다.
보안을 강화하려는 목적이죠.
(3) Tree-shaking
사용하지 않는 코드(죽은 코드)를 자동으로 제거하는 기능입니다.
예를 들어 lodash 전체를 import했지만 실제로는 debounce 함수 하나만 썼다면,
나머지 부분은 빌드 결과물에서 제외됩니다.
이 덕분에 번들 크기가 크게 줄어듭니다.
압축은 “짐을 작게 싸는 것”,
난독화는 “짐에 암호를 붙이는 것”,
Tree-shaking은 “필요 없는 짐은 두고 가는 것”이라고 비유할 수 있습니다.
정리
| 상황 | 번들링의 필요성 | 결과 |
|---|---|---|
| 여러 페이지가 같은 JS를 사용할 때 | 공통 파일을 한 번만 로드 | 캐시 효율 상승, 속도 개선 |
| 최신 JS 문법을 사용할 때 | 브라우저 호환성 확보 | 유지보수 편의성 증가 |
| 성능과 보안을 강화하고 싶을 때 | 코드 압축 및 최적화 | 로딩 속도 향상, 보안 강화 |
결론
MPA에서는 페이지마다 별도의 JS 파일을 불러올 수 있기 때문에
번들링이 반드시 필요한 것은 아닙니다.
하지만 공통 코드가 많아지거나, 유지보수와 배포 효율을 높이고 싶을 때는
번들링이 MPA에도 큰 이점을 줍니다.
즉, “작은 프로젝트라면 굳이 필요 없지만,
조금만 규모가 커져도 반드시 고려해야 하는 단계”라는 뜻입니다.
MPA에서도 번들링은 더 빠르고 안정적인 웹을 만드는
현명한 선택이 될 수 있습니다.
