질문자 님께서 바닐라 JavaScript를 사용하고 있다고 하여 간단한 예시를 들어보겠습니다. 두 개의 하위 페이지가 있는 웹사이트를 만든다고 생각해봅시다. 각 하위 페이지에는 다른 JavaScript 로직이 필요한 상태입니다. 여기서 두 가지 선택지가 있습니다. A: 첫 번째는 모든 JavaScript 로직을 단일 파일로 만들고, 각 페이지에서 불러와 쓰게 하는 것입니다. (1.html, 2.html, 3.html... 에서 사용하는 모든 로직들을 단일 js 파일로 만들기) B: 각 페이지마다 적용할 JavaScript 파일을 따로 만들어 관리하는 것입니다. (1.html의 로직은 1.js에, 2.html에 사용하는 로직은 2.js에, ... 처럼 각 페이지마다 사용할 로직을 분리하기) 여기서 B의 경우가 해당 페이지에서 필요한 로직만 불러오기 때문에 첫 번째보다 좀 더 효율적이라 이야기할 수 있습니다. 따라서 B의 방식으로 구현하는 것이 우리의 목표입니다. A가 이상하게 느껴지실 수도 있는데, 사실 일반적인 웹 애플리케이션은 A를 더 많이 씁니다. 왜냐하면 보통 의존성 관리를 위해 번들러를 쓰기 때문입니다. 번들러는 내가 작성한 소스 코드들과 라이브러리들을 빠르고 안전하게 쓰기 위해 하나의 파일로 묶어주는 도구라고 생각하면 됩니다. 번들러를 사용하면 프로젝트에 사용한 라이브러리들의 의존성을 쉽게 관리할 수 있고, JavaScript 변수가 다른 스코프에 의해 재정의되거나 오염되는 경우를 막을 수 있으며, 배포 전 불필요한 console.log나 공백을 지우는 등의 속도 향상을 위한 유틸리티 기능도 적용할 수 있습니다. 보통 이렇게 번들러가 제작해낸 JavaScript 파일은 단일 파일입니다. 내가 작성한 소스 코드를 비롯해 여러 라이브러리들이 한 파일에 묶여있으니, 파일 크기가 굉장히 크겠죠. 그리고 현재 페이지에서 사용하지 않을 코드들도 있다보니 불필요하게 불러오는 코드들도 있을 것입니다. 이러한 단점을 극복하기 위해, 번들러에서는 단일 JavaScript 파일 사이에서의 의존성을 분석해 다시 여러 개의 파일로 나누는 기능을 제공합니다. 또한 그렇게 나뉜 파일들 중에서 현재 페이지에서 필요한 기능만 담긴 JavaScript 파일만 불러오게 할 수도 있습니다. 여기서 전자의 기술 이름을 Code Splitting이라고 하며, 후자는 Dynamic Import라고 부릅니다.