3줄 요약
1. webpack-bundle-analyzer 을 이용한 번들사이즈 체킹
2. cra 전용 cra-bundle-analyzer를 이용해서 사용함
3. 번들사이즈 체킹 완료
개요
최적화에 알아보던 중 번들사이즈 관련해서 알게 되었다.
webpack-bundle-analyzer 라는 앱을 이용하여 어떤 부분을 점검하고 최적화 해야 더 효율적인지
체크할 수 있다.
https://satisfactoryplace.tistory.com/359
위 사이트를 참고하여 작성하였다.
사용하던중 몇가지 문제를 겪었는데, 여러시도를 해도 되지않아서 검색을 더하게 되었다.
https://80000coding.oopy.io/1d0689df-8e3a-4f1d-8284-75eedbef53db
알고보니 cra 빌드와 webpack으로 세팅한 사람은 사용하는 방법이 각각 달랐다.
물론 cra로 eject를 사용하여 할 수 있지만, webpack과 babel까지 새로 다뤄야해서
성능확인을 위해 소요 되는 시간이 너무 길어 효율적이지 못했다.
그래서 차선책인 cra-bundle-analyzer을 이용하여 시도하였다.
NPM
npm install --save-dev cra-bundle-analyzer
Yarn
yarn add -D cra-bundle-analyzer
이후에 npx cra-bundle-analyzer를 사용하여 build/report.html를 통해 확인하였다.
이를 통해 번들 사이즈를 확인 할 수 있었다.
앞으로 이 체킹하는 방법을 통해 첫 로딩 화면을 관리해주고 확인하는 방법이 하나 더 늘었다.
https://tech.osci.kr/2022/10/24/create-react-app-%EC%97%86%EC%9D%B4-%EB%B0%B0%EC%9A%B0%EB%8A%94-webpack/
그리고 중간에 cra webpack 빌드 방법과 기존의 webpack 빌드 방법 차이점에 대하여
명확히 짚고 넘어갈 수 있어서 좋았고, 웹팩의 장점을 다시 한번 상기할 수 있었다.
웹팩의 장점
파일 단위의 자바스크립트 모듈 관리
웹 개발 작업 자동화
빠른 로딩 속도와 높은 성능
하면서 아쉬운 점은 최적화 하기위해서 줄여야하는 파일들은 확인 할 수 있었으나,
구체적으로 그 파일들을 어떻게 최적화해서 용량을 줄이지에 대한 고민은 해결할 수 없었다.
그래도 문제점은 확인 할 수 있었고, 한번에 번들사이즈 체킹이 되지않아서 웹팩에 대한 공부와
eject에 대한 오류 해결을 하면서 나아가서 만족한다.
