코드분할, 지연로딩
performance > network > 파일의 크기가 크고 다운로드의 시간이 긴 경우
해당 파일이 어떤 코드로 이루어져 있는지 알면 좋은데요.
Webpack Bundle Analyzer라는 라이브러리를 통하면 시각화하여 볼 수 있어요.
Webpack을 직접 세팅했다면 위 방법을 사용할 수 있지만
CreateReactApp을 이용하여 어플리케이션을 세팅하셨다면 npm run eject와 같은 명령을 통해
복잡하게 수정을해야 하는데요.
cra-bundle-analyzer라이브러리를 이용하면 CreateReactApp을 이용한 경우에도
쉽게 webpack-bundle-analyzer의 기능을 사용할 수 있답니다.
위 라이브러리를 통해 코드분할이 필요한 파일에 구성을 파악하고
페이지별로 코드를 분리해요. 즉 하나의 번들파일을 여러 개로 분할해요.
코드분할을 통해 분리된 코드는 필요한 시점에 로드하고 실행해요.
이것을 지연로딩이라고 해요.
꼭 페이지별로 분할하지 않고 모듈의 사이즈가 큰 경우 모듈별로 분할할 수도 있어요.
중요 포인트는 불필요한 코드 or 중복 코드를 줄이고 필요한 시점에 코드가 로드되도록 하는 것 입니다.
React에서 아래처럼 사용하면 동적으로 Import를 사용할 수 있어요.
위에서 설치한 cra-bundle-analyzer를 이용해서 결과를 확인해보면 chunk로 분리된 파일을 확인할 수 있어요.
결과적으로 로드시간도 단축됨을 확인할 수 있습니다.
devLog