해당 페이지에서 필요한 JS만 다운 받는 방식으로 최적화하는 방법이 궁금합니다

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