[Lazy] code split

그동안 코드 스플릿 스플릿 듣기만 했다.

 

그리고 react에 lazy loading 있다는 것도 알았다. 몇번 써본거 같긴하다. 하지만 제대로 알지 못하고 썼었다.

 

그러다보니 의미도 없었다...

 

오늘 이사님과 이야기하던중 오랜만에 접속시 chunk에러가 나는 것을 확인했다고 하신다.

오늘 할 일을 대부분 마치고 chunk에 관해 알아보았다.

우선 간단히 chunk는 react 파일이 빌드 배포될때 모든 코드가 하나의 번들로 묶이게 된다.

번들링은 가져온 파일을 하나의 파일 즉 번뜰로 병합하는 프로세스이다.

이 번들js는 웹페이지에 포함되어 한번에 전체 앱을 로드 할 수 있다.

근데 이게 앱이 커짐에 따라 번들도 커지게 되는데 로드가 오래 걸릴 수 있다.

 

그래서 code split을 하게 되는데 

여러 방법이 있겠지만 React에서는 lazy와 suspense를 이용해 코드 스플리팅을 지원한다.

 

간단히 설명하자면 동적 import가 가능하다는 것이다.

사용법은 react 공식문서를 참고하자.

https://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

아무튼 각설하고 chunk에러의 원인을 예상컨데!

이사님이 오랜만에 들어갔다고했다. 이게 원인인듯 한데

 

아마 그사이 많은 빌드 배포가 일어났을것이고 새로운 chunk들이 생겼을건데

이걸 로컬의 유저가 봤을때 캐시된 chunk를 바라본게 문제가 아닌가 싶다.

 

이걸 해결할 방법을 고찰 해보자.. 오늘 들은 내용이라 지금 부터 생각해보자

 

코드 스플릿을 하면서 dynamic import를 하는데 해당 컴포넌트 chunk를 못찾으면 reload시킨다?

 

아니면 package의 version 관리를 통해 reload?

 

생각좀 해보자