bundle 파일 분석 (bundle-analyzer)

 

 

이번에는 bundle 파일을 분석해서 적적하게 코드를 분할하는법을 해보겠다. 해당 bundle 파일을 분석하기위해 webpack bundle analyzer 툴을 이용해 검사하겠다.

 

 

그런데 문제는 웹팩을 직접구성한게 아닌 CRA로 설정된 기본 웹팩을 사용하고 있다.

직접 플러그인을 넣을려면 CRA를 eject를 하거나 webpack config를 custom할 수 있는 라이브러리를 설치해야된다.

 

다행히 webpack config를 직접 custom하지 않아도 bundle analyzer를 사용할 수 잇는 CRA bundle analyzer 라이브러리를 이용할 수 있다.

 

 

 

 

VS에서 해당 명령어를 차례로 입력하면, build 폴더 파일들이 생성된다. report.html파일을 열어준다.

 

 

bundle analyzer를 통해 bundle파일이 해석되서 나온다. 위에 가장큰 파일이 0.chunk 파일인걸 유추해볼 수 있다.

또한 node_modules는 npm으로 설치한 라이브러리 코드인것을 의미한다.

 

 

 

해당 오른쪽에 src라는 블럭이 있다. 우리가 구현한 코드들이 main chunck에 들어있는걸 의미한다.

 

 

refractor 모듈이 chunk파일에 용량을 대부분을 차지하는것을 볼 수 있다. 해당 모듈을 알아보기위해 pack.lock.json 파일에서 살펴볼 수 있다.

 

여기서 babel/core를 살펴보면 해당 모듈을 설치하기위해선 하위 dependencies에 있는 모듈도 설치가 필요하다는것을 의미한다.

 

 

 

다시 본론으로 돌아가 refractor요소를 dependencies로 삼는 모듈을 살펴보면 react-syntax-highlighter를 찾을 수 있다.

해당 모듈은 

코드마다 색깔이 다르게 표시해주는 역활을 해준다. 이 모듈은 main페이지가 아닌 view페이지에서만 필요한 모듈이다.

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