번들 파일 분석

• webpack을 통해 번들링된 파일을 분석하고 최적화 해 보겠음
• Performance 패널에서 검사 내용을 분석할 때, 0.chunk.js 라는 유난히 크고 다운로드가 오래 걸리는 자바스크립트 파일이 있음

• 화면을 그리는 데 필요한 리소스(리액트 코드)의 다운로드가 늦어지면, 다운로드가 완료된 후에나 화면을 그릴 수 있기 때문에 다운로드가 오래 걸리만큼 화면도 늦게 뜬다는 문제가 있음
• 청크 파일의 구성을 상세히 보기 위해 Webpack Bundle Analyzer라는 툴을 이용할 것임
• 이 툴은 npm에 등록돼 있음. npm 사이트(npmjs.com)에서 검색해 보면 webpack-bundle-analyzer라는 패키지를 찾을 수 있음. 이 툴은 webpack을 통해 번들링된 번들 파일이 어떤 코드로 이루어져 있는지 트리맵으로 시각화하여 보여줌

• 하지만 한 가지 문제가 있음. 이 툴을 사용하려면 webpack 설정을 직접 수정해야 한다는 것임
• 이 서비스는 CRA를 통해 생성됐기 때문에 webpack에 대한 설정이 숨겨져 있음. 그래서 webpack 설정을 직접 변경하려면 npm run eject 스크립트를 통해서 CRA의 설정 파일들을 추출해야 함.
• eject 없이 webpack 설정을 변경할 수 있는 react-app-rewired나 craco 같은 툴이 존재하긴 하지만, 여기서는 더 간편하게 번들 사이즈를 분석할 수 있게 도와주는 cra-bundle-analyzer라는 툴을 사용 할 것임
• cra-bundle-analyzer은 내부적으로 webpack-bundle-analyzer를 사용하는 툴로, 결과물은 동일하지만 CRA 프로젝트에서 eject 없이 사용할 수 있음
• 이 툴은 webpack-bundle-analyzer와 마찬가지로 npm 사이트에서 찾을 수 있음

• cra-bundle-analyzer를 프로젝트에 설치하고 실행해보자

//설치
npm install --save-dev cra-bundle-analyzer
yarn add -D cra-bundle-analyzer

//실행
npx cra-bundle-analyzer

• 위 스크립트를 실행하면 build/report.html 파일이 생긴다. 이 파일을 열어보자