번들파일 질문

답변 감사합니다.

번들러의 필요성과 왜 쪼개는 지에 대한 이유는 알고 있습니다.

다만 lazy로딩이후에 bundle-analyzer의 상태에서 어떤 파일이 어떤 코드를 의미하는 지 조금 헷갈립니다.

이미지 모달 컴포넌트에서 image-gallery.js를 들고 있으면 되는데 굳이 다른 번들러 파일에 있는지에 대한 질문이였습니다.

안녕하세요 dongwoo kim님,

번들 파일과 관련하여 질문을 주셨는데요,

우선 아셔야 할 것은 원래 자바스크립트 파일들(모든 라이브러리와 소스코드들) 따로따로 분리되어 있습니다.
그래서 번들러 없이 코드를 실행하게 되면 모든 파일들을 브라우저에서 전부 불러와야 합니다.
당연히 이러한 방식은 여러가지 면에서 비효율적입니다.

그래서 번들러가 등장합니다. 여러 소스코드를 각각 로드할 필요없도록 하나의 파일로 합쳐줍니다.
(모듈들을 여러 파일로 쪼개서 사용하는 리액트나 요즘 프레임워크들의 경우 더욱 효율적입니다)

하지만 서비스의 구조가 커지다 보니 번들 사이즈도 커지고 초기 로딩속도가 저하되는 단점이 발생합니다.
그래서 이때 코드 분할을 하여 초기 로딩속도를 개선하는 겁니다.

즉, 모든 코드들(image-gallery)이 합쳐져 있는 것이 효율적이기 때문에 합쳤는데, 문제가 있어 일부만 다시 쪼갠 것입니다.

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)