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

안녕하세요, nu 님,

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

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

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

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

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

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

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

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

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