Chunk Load Error란?
React, Vue, Angular 및 이와 유사한 프레임워크가 작동하는 방법은 자바스크립트 파일을 다운로드하여 브라우저에서 웹 사이트를 렌더링하는 것. 프로젝트를 빌드할 때마다 두 가지 유형의 파일이 생성.
Main entry file- index.html의 스크립트 태그가 가리키는 파일Other helper files- 필요에 의해 main entry file에 import된 파일
대개 작은 프로젝트가 있는 경우 엔트리 파일 하나로 충분. 모든 JavaScript 코드를 동일한 파일에 저장할 수 있다. 그러나 더 빠른 로딩과 더 나은 사용자 경험을 위해 자바스크립트 코드를 빌드할 때 여러 파일로 분해할 수 있으며 이러한 파일들은 필요할 때마다 메인 엔트리 파일에 의해 동적으로 가져올 수 있다.
이런 helper file을 fetching하는 동안 에러가 관찰되고 ChunkLoad Error가 나온다.
사용되는 javascipt file들은 chunks라고한다.
Chunk load Error, 왜 발생하는데?
브라우저가 동적으로 가져온 일부 javascript file을 가져오는 동안 오류가 발생할 때 발생.
오류가 발생하는 이유는?
- 체크섬 유효성의 실패
수신된 파일의 체크섬이 스크립트 태그의 무결성 특성와 일치하지 않을 때 발생할 수 있다.
바이러스 백신, 브라우저 확장명, 프록시 또는 광고 차단 소프트웨어가 파일 내용을 수정하고 있기 때문에 체크섬과 일치하지 않을 수 있다.
- 관련 chunk파일을 찾을 수 없거나 오래된 파일
브라우저가 청크 파일을 찾거나 다운로드할 수 없기 때문에 이러한 문제가 발생할 수 있다. 파일이 존재하지 않기 때문이기도 하지만 인터넷 오류(프록시, 방화벽, 운영 중단 등)의 수백 가지 이유 때문일 수도 있다. 브라우저가 청크 파일을 다운로드할 수 있지만 다운로드된 파일이 오래된 파일인 경우에도 발생할 수 있다.
Chunk Load Error 예시
예를들어 한 사용자가 main entry file을 다운받았고 이 entry file은 필요할때마다 chunk1.js, chunk2.js를 다운로드 한다. 그와 동시에 중요한 버그를 고쳐서 다시 배포를 했다.
이로인해 이전 chunk가 삭제되고 새로운 chunk로 대체된다. 사용자의 경우 chunk1.js 등을 다운로드하려고 할 때마다 해당 파일이 존재하지 않기 때문에 chunk load error가 발생한다.
이 케이스는 사용자와 서버간의 일부 캐싱으로 인해 애플리케이션이 오래 전에 다시 배포했더라도 이전 엔트리파일로인해 브라우저가 존재하지 않는 오래된 chunk파일을 가져오려고 시도해서 chunk load error가 발생한다.
해결책
사용자
캐시를 지워본다...
개발자
- 빌드시에 package.json의 버전정보를 json파일로 남겨서 버전을 체크해주는 방법이 있다.
이 방법은 따로 구체적으로 포스팅할 것이지만 최선의 해결책은 아닌 것 같다. - chunk load error가 날 때 새로고침을 해주는 방법도 있다.
