리액트 최적화

회사에서 제작한 청소년 금연 관련 admin을 리팩토링 하는 과정에서 light house 지표 성능 최적화를 진행해보고 싶어졌습니다. 최적화를 진행하기 전 성능 지표는 61점으로 낮은 수준으로 LCP와 FCP가 각각 3.4초인 것을 확인할 수 있었습니다.

js 파일이 어떤 코드로 구성이 어떻게 되어 있는지 가시화하는 bundle-analyze를 통해 js 번들을 줄일 인사이트를 얻을 수 있습니다.webpack-bundle-analyzer을 사용하기 위해서는 create-react-app 환경에서 eject을 해야합니다.