프론트엔드 성능 최적화 시 번들 크기를 무엇으로 판단하는가?

최초 로딩 시 사용자가 체감하는 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 기준으로 판단한다. 파일 용량뿐 아니라 런타임 실행 시간과 파싱 시간도 함께 봐야 한다.

파일이 작아도 복잡한 로직이 많으면 TBT가 늘어난다.

코드 분할(Code Splitting)으로 초기 진입점에 필요한 최소한의 JS만 로드하게 만든다. 초기 JS가 줄면 메인 스레드 점유 시간도 짧아진다.

트리 쉐이킹(Tree Shaking)으로 사용하지 않는 코드를 제거해 전송량을 줄인다. ESM(ES Modules)을 지원하는 라이브러리는 사용하지 않은 내보내기를 제거하기 쉽다.