번들 (Bundle)

번들(Bundle)은 웹 개발에서 서로 의존하는 모듈과 필요한 자원을 묶어 실행 환경에 전달하도록 만든 빌드 산출물입니다. 원본 파일의 연결 관계를 따라 코드를 구성하며, 설정에 따라 하나 또는 여러 파일로 나옵니다. 번들을 만드는 도구는 번들러이고, 브라우저로 보내는 클라이언트 번들은 실행 대상이 브라우저인 산출물을 가리킵니다.

의존 관계에서 만들어지는 산출물

webpack의 핵심 개념 문서는 진입점에서 의존 관계를 따라 필요한 모듈을 모으고 하나 이상의 번들로 만든다고 설명합니다. 화면 코드가 공통 함수와 외부 라이브러리를 불러오면 이 연결도 빌드의 입력이 됩니다. 개발자가 작성한 한 파일의 크기만으로 최종 산출물의 크기를 알 수 없는 이유는 그 파일이 다른 코드를 함께 참조하기 때문입니다.

진입점은 어떤 모듈에서 연결 관계를 탐색할지 정하고, 출력 설정은 만들어진 파일의 이름과 위치를 정합니다. 원본 폴더의 파일을 단순히 하나로 이어 붙이는 작업과는 차이가 있습니다. 도구는 모듈을 해석하고 필요한 변환을 적용하며 실행 환경에 맞는 결과를 만듭니다. 따라서 원본 파일 이름과 배포된 파일 이름이 그대로 일치하지 않을 수 있습니다.

소스 코드를 수정한 결과가 공개 화면에 반영되려면 그 수정이 포함된 산출물이 실제로 제공돼야 합니다. 파일을 고쳤어도 이전 번들을 계속 배포하거나 캐시에서 오래된 파일을 받으면 화면은 달라지지 않습니다. 오류 조사에서는 원본 커밋과 빌드 결과, 실제 내려받은 파일을 연결합니다. 빌드가 끝났다는 기록과 사용자가 새 파일을 받았다는 관측은 나누어 확인합니다.

파일 분할과 필요한 시점의 로딩

webpack의 코드 분할 안내는 코드를 여러 번들로 나누고 필요할 때 불러오는 방식을 설명합니다. 첫 화면에서 쓰지 않는 편집기나 차트 기능을 별도 파일로 나누면 그 기능을 여는 시점에 요청하도록 구성할 수 있습니다. 파일을 여러 개 만든 결과와 실제로 필요한 시점까지 로딩을 미룬 결과는 같지 않으므로 로딩 경로를 함께 봅니다.

여러 화면이 같은 라이브러리를 사용하면 공통 코드를 어떻게 나눌지도 정합니다. 각 파일에 반복해서 들어가는 코드와 함께 공유하는 코드는 다운로드와 캐시 동작에 서로 다른 영향을 줍니다. 무조건 파일 수를 줄이거나 잘게 나누는 것만으로 최적 구성이 정해지지는 않습니다. 사용자가 방문하는 화면과 변경 빈도, 로딩 순서에 맞춰 산출물을 살펴봅니다.

네트워크로 받은 바이트 수와 실행 비용도 다릅니다. 전송 압축으로 다운로드 크기가 줄어도 브라우저가 코드를 해석하고 실행하는 작업은 남습니다. 번들 크기를 비교할 때는 원본 크기, 압축한 전송 크기, 로딩되는 범위를 같은 기준으로 맞춥니다. 특정 파일 하나가 작아졌더라도 다른 파일로 코드가 이동했다면 전체 다운로드가 줄었다고 단정할 수 없습니다.

원본 코드와 실행 환경의 경계

webpack의 출력·로더 설명에서 로더는 파일을 처리해 모듈 그래프에 넣는 변환을 담당하고 출력 설정은 번들의 저장 위치를 정합니다. 문법 변환, 여러 모듈 결합, 공백과 이름을 줄이는 최적화는 서로 다른 작업입니다. 결과 파일의 모습이 달라졌다고 원본의 기능이나 정보가 감춰졌다고 해석하지 않습니다.

브라우저에 전달한 코드는 사용자가 내려받을 수 있는 자료입니다. 코드 안에 비밀 API 키를 직접 넣으면 변수 이름을 바꾸거나 파일을 압축한 뒤에도 그 값이 산출물에 남을 수 있습니다. 외부 서비스의 비밀 인증은 서버가 맡고, 브라우저에 보낼 값은 공개 가능한 범위로 정합니다. 서버 전용 코드가 클라이언트 의존 관계로 들어가는지 빌드 결과에서 살피는 이유입니다.

AI가 추가한 라이브러리 때문에 예상보다 큰 번들이 만들어졌다면 실제 포함된 모듈과 가져오기 경로를 확인합니다. 같은 기능을 여러 패키지에서 중복으로 불러왔는지, 화면이 쓰지 않는 코드까지 초기 로딩에 들어갔는지 살펴볼 수 있습니다. 수정 뒤에는 빌드 보고서와 실제 화면 동작을 함께 대조해 필요한 기능을 없애지 않고 로딩 범위를 조정했는지 확인합니다.