닫힌 질문 | 리액트 개발자 개인만의 웹 성능 최적화 꿀팁이 있을까요?

생각나는 대로 적어보겠습니다. 1. 이미지 용량 줄이기 - Vite는 https://github.com/JonasKruckenberg/imagetools 사용하여 최적화, Next.js는 next/images 사용하여 최작화 - 이미지 최적화는 webp, avif 등 모던 포맷과 해상도 별 이미지를 생성해서 최적화 가능 2. 번들 사이즈 줄이기 - Vite는 https://github.com/nonzzz/vite-bundle-analyzer, Next.js는 @next/bundle-analyzer 사용하여 어떤 라이브러리가 번들 용량을 차지하고 있는지 분석 가능 - 경험상 lodash나 lottie 라이브러리들이 번들 사이즈를 많이 차지하고 있을 확률이 높았음 - lodash는 lodash-es를 사용해서 Tree Shaking 지원을 보장받거나 특정 모듈만 import해서 용량을 줄일 수 있음 - lottie는 경량화 된 lottie light를 사용해서 용량을 줄일 수 있음 3. React 코드 최적화 - 화면이 버벅이는 경우 메모이제이션을 통해 리렌더링을 최소화하기 - 애니메이션 구현 시 가능하면 state 대신 CSS 애니메이션 만 사용해서 구현해보기