code splitting 한 청크를 배포 후 잃어버리는 문제 😶‍🌫️

이러한 상황이 있다고 가정해보자,

코드스플릿팅을 적용해서, 1페이지에서 A 버튼을 누를 때 B라는 이름의 파일을 요청하게끔 한다. 이 때, 만약에 사용자가 1페이지에 아직 있는 동안 프론트 코드를 추가 빌드 및 배포를 해버려서 B라는 이름의 파일이 C라고 바뀌었다고 하면... 사용자가 A버튼을 눌럿을 때 어떤 결과가 일어날까?

해결방법은?

• 이전 버전 유지하기 (CDN 제어)

  • 이전 배포의 오래된 청크를 일정 시간동안 냅두기.
  • 이렇게하면, 나중에 새로고침 할 때 새 버전으로 자연스럽게 마이그레이션 된다.
  • 하지만 CDN 을 제어할 수 없는 상황이라면?

• 파일명에 해시값을 제거하기

  • 코드의 일관성이 훼손될 수 있음.

• 버전 비교하기

  • 클라이언트 측에서 버전이 업데이트 되지 않았따는 것을 알고, 그거에 대한 조치를 할 수 있다면?
  • API 하나 만들어서, API 를 통해서 버전 번호를 파악하기. 뭐 요런것?

• 오류 시 강제 새로고침

  • 예방할 수 없다면 처리하라!

• 서비스 워커 사용하기

  • 이전 파일들을 백그라운드에서 다운로드하고, 클라에 캐시한 후에 404가 뜨면 로컬 캐시로 폴백하기.

https://imrecsige.dev/garden/how-to-solve-missing-chunk-code-splitting-errors-after-deploy/