CRA는 Webpack과 Babel 설정이 기본적으로 되어있어서, 프로젝트가 빌드될 때 Webpack에서 번들링 작업을 거치게 된다. 따라서 프로젝트가 커질수록, 하나로 합쳐진 bundle js이 용량이 커지기 때문에, 페이지 최초 접속 시 CSR(클라이언트 사이드 렌더링) 특성상 리소스들과 하나로 된 js 파일을 불러오는데 오래 걸리게 된다.
따라서 코드 분할(code splitting)을 통해,
하하 하지만, cra-bundle-analyzer를 사용하면 손쉽게 할 수 있다구!
근데 오류가 빵빵 터지더라, 어쩔 수 없이 cra 공식에서 제시하는 bundle-analyzer를 사용하기로 했다.
현재 bundle 크기가 358.72KB라고 한다. 코드 스플리팅을 통해 줄여보자!
참고로 main.js 크기는 76.36KB이다.
