번들파일 질문
289
87 asked
안녕하세요.
레이지 로딩이 된 이후에 budle-analyzer상태에 대한 질문이 있습니다.
저희가 구현한 코드(src)가 레이지로딩에 의해서 분리가 된 것 같습니다. 근데 node_modules에 포함되어있던 image-gallery.js가 모달컴포넌트에서만 필요할 것 같은데 공통적으로 사용되는 budler파일에 저장이 된 이유가 있나요?
cache에 의해서 어차피 한번만 들고오면 되기 때문에 공통으로 사용되는 bundler파일에 넣어진 것인지 궁금합니다.
Answer 2
1
답변 감사합니다.
번들러의 필요성과 왜 쪼개는 지에 대한 이유는 알고 있습니다.
다만 lazy로딩이후에 bundle-analyzer의 상태에서 어떤 파일이 어떤 코드를 의미하는 지 조금 헷갈립니다.
이미지 모달 컴포넌트에서 image-gallery.js를 들고 있으면 되는데 굳이 다른 번들러 파일에 있는지에 대한 질문이였습니다.
0
아하 제가 이해를 잘못했군요.
그건 create-react-app의 기본 webpack 설정 때문에 그렇습니다.
기본적으로 cra의 webpack은 node_modules 라이브러리들과 서비스 코드(src)를 구분하여 번들링 합니다.
1
안녕하세요 dongwoo kim님,
번들 파일과 관련하여 질문을 주셨는데요,
우선 아셔야 할 것은 원래 자바스크립트 파일들(모든 라이브러리와 소스코드들) 따로따로 분리되어 있습니다.
그래서 번들러 없이 코드를 실행하게 되면 모든 파일들을 브라우저에서 전부 불러와야 합니다.
당연히 이러한 방식은 여러가지 면에서 비효율적입니다.
그래서 번들러가 등장합니다. 여러 소스코드를 각각 로드할 필요없도록 하나의 파일로 합쳐줍니다.
(모듈들을 여러 파일로 쪼개서 사용하는 리액트나 요즘 프레임워크들의 경우 더욱 효율적입니다)
하지만 서비스의 구조가 커지다 보니 번들 사이즈도 커지고 초기 로딩속도가 저하되는 단점이 발생합니다.
그래서 이때 코드 분할을 하여 초기 로딩속도를 개선하는 겁니다.
즉, 모든 코드들(image-gallery)이 합쳐져 있는 것이 효율적이기 때문에 합쳤는데, 문제가 있어 일부만 다시 쪼갠 것입니다.
답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
bundle analyzer 에 대한 질문이 있습니다.
0
108
2
Cannot find module serve 에러
1
104
1
성능 탭에서 소요시간이 안보입니다
0
204
2
이미지 CDN 만드는 방법
0
459
1
Performance FPS 탭이 안보여요.
1
797
1
CPU throttling이 뭔가요?
0
1119
1
default export가 아닌 named export일 때 lazy사용법
1
1070
1
lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다
1
582
1
network 캐싱에 대해서 질문 있습니다!
1
426
1
vue project에서 chrome performance tab 확인하기
1
457
1
node version으로 인한 오류
4
1231
1
강의 자막
1
955
2
번들파일과 병목현상 질문
2
396
1
webpack-bundle-analyzer 질문
1
786
1
이미지 프리로딩 질문
1
385
1
이미지 최적화 활용
1
581
1
강력 새로고침
1
323
1
Suspense 관련해서 질문드립니다
2
360
1
config-overrides cant resolve path
1
362
1
이미지 preload 컴포넌트 preload 차이 질문드립니다.
1
611
1
custom react 환경에서 node_modules chunk 분리
1
380
1
removeSpeical 함수를 줄여야겠다고 하는 이유!
1
282
1
Factory pattern에 대해서 궁금한 점이 있습니다
2
365
2
텍스트 압축 방식에 대해 질문이 있습니다
2
951
1