lazy loading

로딩 성능 최적화 - 코드 스플릿, 레이지 로딩

Code Split & Lazy Loading dynamic import나 react-lazy를 사용해서 chunk를 여러 개로 나눠 불필요한 코드, 중복 코드 없이 적절한 크기의 코드가 적절한 타이밍에 로드될 수 있도록 하는 것이다. 하나의 큰 JS파일을 다운로드 하는것 보다 여러개의 작은 chunk(해당 페이지에서 필요한 chunk들만)를 다운로드하는 것이 더 빠르기 때문에 코드 스플릿을 통해 초기 로딩 속도를 개선할 수 있다. 크게 2가지 패턴이 있다. 페이지 별로 (라우팅 단위) 모듈 별로 (컴포넌트 단위) 페이지별로 코드 스플릿 번들 파일 분석하기 코드스플릿을 하기에 앞서 webpack-bundle-analyzer를 활용해서 번들된 파일들의 크기를 확인한다. 보면 refractor라는 모듈이 c..