inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

무조건 다 코드 스플리팅 하는 것이 좋은 방법일까요?

416

nu

작성한 질문수 18

1

페이지 마다 코드 스플리팅 하거나 페이지 안에서 당장 사용하지 않는 컴포넌트를 할텐데,

페이지 마다, 컴포넌트 마다, 정말 모든 것을 다 코드 스플리팅 하는 것이 무조건 좋을까요?

아니면 당장 불러올 필요 없더라도 코드 스플리팅을 하지 않는다던가 하는,
결정하는 기준이 있을지 궁금합니다.

react devtools

답변 1

1

유동균

안녕하세요, nu 님,

굉장히 좋은 질문을 주셨네요.

모든 최적화 기법에는 장단점이 있습니다.

코드 분할은 초기 로드하는 리소스를 적게 불러올 수 있게하여 초기 로딩 속도를 빠르게 한다는 장점이 있는 반면, 다른 페이지 또는 분할된 컴포넌트를 사용할 때, 추가적인 로딩 과정을 거치기 때문에 약간에 딜레이를 초래합니다.

이미지 사이즈를 줄이는 방법도 이미지 사이즈를 줄인 만큼 빠르게 이미지를 보여줄 수 있지만, 그 만큼 화질이 저하됩니다.

이런 식으로 어떤 기법이든 장단점이 있기 때문에 결국 상황에 맞게 가장 최적인 방법을 찾는 것이 중요합니다.

그렇다면, 코드 분할은 어떤 기준으로 하면 좋을까요?

아쉽지만 그것도 정해진 것은 없습니다. 본인의 판단하에 필요하다고 생각되면 적용하시면 됩니다. (너무 무책임한 말일 수도 있지만, 그렇습니다.)
다만, 몇 가지 고민해볼 수 있는 것들은 정리해볼 수 있을 것 같은데요,
- 분할하려는 코드는 어느 시점에 로드될 것인가? (초기에 바로 필요한 코드라면 분할할 이유가 없겠죠?)
- 분할한 코드는 어느 확률로 사용될 것인가? (예를 들어, 10%의 확률로 사용되는 코드라면, 10%의 확률을 위해 코드를 전부 가지고 있는 것보다는 초기 로딩 속도를 위해 분할해 두는 것이 더 좋지 않을까요?)
- 분할할 코드의 사이즈가 얼마나 큰가? (아무리 100%로 호출되는 코드여도 사이즈가 10MB라면 처음부터 로드하는데에 많은 병목을 발생시키겠죠? 중요한 리소스(js, css)가 먼저 로드될 수 있도록 분할하는 게 좋을 겁니다.)

이 외에도 여러가지 고민을 해볼 수 있겠지만, 지금 생각나는건 이 정도네요.

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

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

0

108

2

Cannot find module serve 에러

1

104

1

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

0

205

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

583

1

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

1

427

1

vue project에서 chrome performance tab 확인하기

1

458

1

node version으로 인한 오류

4

1231

1

강의 자막

1

956

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

366

2

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

2

951

1