번들파일 질문

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

2-5) 컴포넌트 Lazy Loading (Code Splitting)

작성

225

안녕하세요.

레이지 로딩이 된 이후에 budle-analyzer상태에 대한 질문이 있습니다.

저희가 구현한 코드(src)가 레이지로딩에 의해서 분리가 된 것 같습니다. 근데 node_modules에 포함되어있던 image-gallery.js가 모달컴포넌트에서만 필요할 것 같은데 공통적으로 사용되는 budler파일에 저장이 된 이유가 있나요?

cache에 의해서 어차피 한번만 들고오면 되기 때문에 공통으로 사용되는 bundler파일에 넣어진 것인지 궁금합니다.

답변 2

질문자

답변 감사합니다.

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

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

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

지식공유자

아하 제가 이해를 잘못했군요.
그건 create-react-app의 기본 webpack 설정 때문에 그렇습니다.

기본적으로 cra의 webpack은 node_modules 라이브러리들과 서비스 코드(src)를 구분하여 번들링 합니다.

지식공유자

안녕하세요 dongwoo kim님,

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

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

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

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

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

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

인프런 커뮤니티 질문&답변