CRA에서 eject 없이 webpack-bundle-analyzer 사용하기

라이트 하우스에서 우리 프로젝트가 Performance 16점이 나왔다.

번들 용량이 많다..

 

spa 경우 이 번들 패키지를 한번에 다운로드받고 그게 완료되면서 렌더링을 하는데그렇기 때문에 초기 로딩속도가 느리다고 하는 것임..

 

우리 번들은 용량이 꽤 되보인다.

 

구글링 이후 16점 짜리 퍼포먼스를 끌어올리려면 필요한 번들만 가져오게끔해야한다고 했다.

 

리액트 공식홈에도 있듯이 lazy를 사용하는 방법인데

 

사실 어젯 밤에 다 일일이 바꿔주었음에도 16점이 나왔다.. 그전에도 16점이였고 변화가 없었다..

 

직접 번들패키지를 눈으로 보고싶어서

 

webpack-bundle-analyzer 를 사용했다.

 

cra에서 웹팩을 수정하는 방법도 있지만 수정하려면 웹팩을 꺼내기위해서 eject를 해야해서 패키지 통일성?이 깨질 우려가 있다는 글을 보고 eject 없이 하는 방법을 알아냈다.

 

 yarn add -D webpack-bundle-analyzer

 yarn add -D cra-bundle-analyzer

npx cra-bundle-analyzer

순서대로 해주면 된다.

 

 

우리 페이지의 번들이다...

음 리액트 아이콘이 이렇게 큰가?

 

이걸 뜯어고쳐 볼 생각이다.