Code Splitting , Lazy Loading

전에 글에도 언급했듯이  view페이지에서만 필요한 이 모듈은 지금 불필요하게 메인페이지에서도 로드하는중이다. 따라서 이 코드를 필요한 부분만큼 분리하고 , 필요한만큼 로드하면 된다.

 

code splitting이란 말 그대로 코드를 분할하고 작은 사이지로 만드는것을 의미한다. 하나의 bundle파일에 여러개의 페이지 컴포넌트가 들어간걸 알 수 있다. 필요한 페이지는 정해져있는데 불필요한 페이지까지 불러오니까 다운로드 속도 느리고 페이지 로딩속도도 느려지고.따라서 페이지를 나누는 code splitting작업이 필요하다. 내가 접속한 페이지 모듈들만 불러오게 작업해준다.code splitting은 페이지별로 분할하거나 , 모듈별로 분할하는 방법이 있다.

 

 

 

우리는 리액트 공식문서에서 나와있는 Route-based code splitting을 이용할 것이다. 위엤는 lazy함수는

우리가 런타임환경에서 그러니까 동적인상황에서 필요한 컴포넌트를 불러온다.

 

Code Splitting | webpack

Code Splitting | webpack

그전에 한가지 설정해야 되는부분이 webpack설정이다. code splitting를 실제로 적용하는 주체가 webpack이므로

webpack이 code splitting을 위한 설정을 해줘야한다.하지만 우리는 CRA를 통해 기본적인 웹팩 설정이 잘되어있다.

code splitting코드만 작성하면 된다.

 

 

 

리액트 공신문서가 나와있는데로 컴포넌트를 동적으로 불러오고, suspense도 적용해준다.

 

 

얼마나 변화가 있는지 bundle-analyzer를 실행한다.

 

 

전:

후:

해석해보면, 모든 모듈을 불러오는것이 아닌, 필요한페이지의 모듈만 불러오는것이다.

 

네트워크 탭에서 확인해보면, 메인페이지에서는 이만큼 데이터를 불러왔다면

 

 

상세페이지에 들어갔을경우 데이터를 추가적으로 불러오는것을 확인할 수 있다.