inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

1-9) Code Splitting & Lazy Loading

컴포넌트 재사용의 경우 코드스플리팅 기준

345

easyiscat

작성한 질문수 12

1

안녕하세요, 강의 잘 들었습니다.

 

다름이아니라, 코드스플리팅을 적용해주는 기준점을 어떻게 잡아야할지 궁금해서 이렇게 질문을 드리게되었습니다.

 

A 와 B 라는 페이지가 있을 경우,

A와 B에서 공통으로 사용하는 컴포넌트가 존재하는 경우에

페이지 단위로 코드스플리팅을 하게 되면, 각 페이지에서 동일한 컴포넌트를 중복하여 번들링하게 되는건가요?

 

번들링을 중복으로 하게된다면 그 부분은 단점이라고 생각하게되는데, js파일을 실행시켜 돔에 그려주기전까지 대기시간의 총합은 더 커지게되나, 초기렌더링의 시간을 줄여 줄 수 있기 때문에 사용되는건가요??

 

마지막으로, 번들링이 중복으로 된다면 조금이라도 오버헤드를 줄일 수 있는 패턴이나 방법이 있을까요?

 

감사합니다.

react devtools

답변 1

2

유동균

안녕하세요, easyiscat님,

코드 분할에 대해서 질문을 주셨는데요,

A, B 페이지에서 공통 모듈을 사용하고 페이지 단위로 코드 분할을 할 때, 어떤 구조로 코드 분할이 될지는 해봐야 알 것 같은데요, (아마 페이지 따로 모듈 따로 분할될 거라 생각됩니다.)

확실한건, 모듈이 중복으로 들어가지는 않습니다.
분할된 모듈 코드를 A에서 로드했다면 B에서는 로드없이 이미 로드된 모듈을 그대로 사용합니다.

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

bundle analyzer 에 대한 질문이 있습니다.

0

117

2

Cannot find module serve 에러

1

126

1

성능 탭에서 소요시간이 안보입니다

0

230

2

이미지 CDN 만드는 방법

0

474

1

Performance FPS 탭이 안보여요.

1

819

1

CPU throttling이 뭔가요?

0

1127

1

default export가 아닌 named export일 때 lazy사용법

1

1079

1

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

1

593

1

network 캐싱에 대해서 질문 있습니다!

1

429

1

vue project에서 chrome performance tab 확인하기

1

462

1

node version으로 인한 오류

4

1240

1

강의 자막

1

961

2

번들파일과 병목현상 질문

2

402

1

webpack-bundle-analyzer 질문

1

790

1

이미지 프리로딩 질문

1

389

1

이미지 최적화 활용

1

589

1

강력 새로고침

1

331

1

Suspense 관련해서 질문드립니다

2

364

1

config-overrides cant resolve path

1

368

1

이미지 preload 컴포넌트 preload 차이 질문드립니다.

1

617

1

custom react 환경에서 node_modules chunk 분리

1

384

1

removeSpeical 함수를 줄여야겠다고 하는 이유!

1

290

1

Factory pattern에 대해서 궁금한 점이 있습니다

2

377

2

텍스트 압축 방식에 대해 질문이 있습니다

2

959

1