프로젝트가 점차 진행되면서 번들 파일 사이즈가 커지는데요.
이때 자연스레 로드 시간이 길어져서 사용자에게 불편함을 주게됩니다.
이것을 방지하는 방법은 큰 번들 파일을 나누는 것입니다.
코드 분할은 번들 파일을 쪼개 여러개의 파일로 만든 다음
런타임에 동적으로 불러와 실행시키는 기능입니다.
코드 분할 방법
- Entry Points
- Dynamic Imports
이 두 가지 방식있습니다.
Entry Points
webpack을 설정할때 entry가 하나가 아닌 여러개로 만드는 것입니다.
이렇게 하면 빌드 결과가 그 만큼의 번들 파일이 나오는데요.
하지만 이 방법에 문제점이 있습니다.
만약 두 파일에서 동일한 모듈을 사용한다면
2개의 번들 파일에 중복되는 모듈이 있다는 것을 의미합니다.
이것을 방지하기 위해서는 다음과 같은 방법을 사용합니다.
dependOn이라는 옵셥을 사용해서 chunk간에 공유되는 모듈을
같이 사용합니다.
이렇게 공유되는 디펜던시를 직접 설정하기보다는 webpack이 자동으로 하는 방법도 있습니다.
splitChunks 옵션에 chunks: all이라고 하면 공유되는 디펜던시를 추출해 새로운 청크로 만듭니다.
runtimeChunk 옵션은 여러개의 엔트리 포인트가 하나의 HTML 페이지에서 사용된다면 쓰는 옵션입니다.
Dynamic Imports
import() 문법을 사용해서 코드 분할을 합니다.
import() 문법은 Promise를 반환하는데
이떄 오래된 브라우저는 Promise를 인식하지 못하므로 따로 폴리필을 설정해줘야 합니다.
코드 분할 패턴
코드 스플릿팅의 패턴은 크게 2가지인데
페이지 별, 모듈 별로 하는 방법있습니다.
React에서 동적 임포트를 할때 lazy라는 함수로 감싸줘야 합니다.
그리가 반환값을 React 컴포넌트 처럼 사용하면 됩니다.
그때 Suspence 컴포넌트안에서 사용해야하는데 그 이유는
동적 로드가 되는순간 보여줄 다른 컴포넌트를 설정해야하기 때문입니다.
만약 없이 한다면 그 순간 로드가 되기 전이기 때문에 에러가 발생합니다.
