[TIL] 가장 쉽게 create react app 번들 사이즈 확인하는방법

가장 쉽게 create react app 번들 사이즈 확인하는방법

1. 배경

평소 create-react-app(cra)로 제작된 프로젝트의 번들 사이즈를 확인할 때 webpack-bundle-analyzer를 활용했다.

위 패키지를 활용하기 위해선 webpack 설정을 건드려야 했다.

이로 인해 eject를 하거나, 또는 react-app-rewired, craco와 같은 라이브러리를 사용했어야만 했다.

최근 create-react-app 공식 문서를 확인해 본 결과

webpack 설정 필요 없이 아주 간단하게! 번들 사이즈를 확인할 수 있는 방법이 있었다.

바로 source-map-explorer를 활용하면 된다.

2. 예시

1. check-bundle-size라는 앱을 만든다.

   npx create-react-app check-bundle-size

2. source-map-explorer를 설치한다.

   npm install --save-dev source-map-explorer

3. 프로젝트를 빌드 한다

   npm run build

4. package.json의 scripts부분에 아래와 같은 analyze script를 추가한다

   
   "scripts": {
       "analyze": "source-map-explorer build/static/js/*.js",
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "eject": "react-scripts eject"
     },

5. 터미널에서 npm run analyze로 해당 스크립트를 실행한다.

   

   npm run analyze

6. 결과를 확인한다.

   

3. 느낀 점

이전에 create-react-app의 번들 사이즈를 확인하기 위해 구글링을 했었다.

검색 결과 webpack-bundle-analyzer를 활용하는 방법이 대다수였다.

나 역시도 그 방법만 알고 있었다.

react 개발을 처음 하는 분들에게 webpack-bundle-analyzer를 활용하는 것은

조금 어려울 수 있다.

누구나 쉽게 creat-react-app으로 작성된 앱의 번들사이즈를 확인할 수 방법을

공유하고자 이 글을 작성했다.

4. references

https://create-react-app.dev/docs/analyzing-the-bundle-size/

Uploaded by N2T