REACT_코드스플리팅_Code Spliting

webpack에서 프로젝트를 번들링 할 때 파일 하나가 아니라 파일 여러개로 분리시켜서 결과물을 만들 수 있습니다. 하지만 프로젝트 단위가 커지면 불러오는 module의 크기도 커진다. 그렇기 때문에 불러오는 module도 필요에 따라 분할 하고 필요한 module만 불러온다면 속도가 향상될 것입니다. 이를 위해서 코드스플리팅을 통하여 캐쉬에 저장된 모듈은 제외하거나 필요한 모듈만 불러올 수 있도록 설정해주면 좋습니다.

라이브러리 분리하기 >> 비동기 렌더링하기 >> 빌드후 확인하기

현재 프로젝트를 git 푸시를 완료한 후

yarn eject

명령어를 치면


와 같은 파일이 생기고 자동으로 설정을 완료한다. 예전에는 CommonsChunkPlugin를 커스텀마이징을 통하여 구현을 하였지만 현재는 SplitChunksPlugin 생겨서 자동으로 페이지의 필요와 불필요를 판단하여 보다 편하게 코드스플리팅이 가능하게 되었다.

자세한 내용: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366