밝을희 클태

번들 사이즈 최적화 본문

KEYNUT 프로젝트

번들 사이즈 최적화

huipark 2025. 1. 12. 17:31

메인페이지에 three.js를 사용해서 3D-Model을 렌더링하는데, three.js의 번들 사이즈가 지나치게 큰 걸 확인했다.

3D-Model의 경우 사용자가 즉시 봐야 하는 필수 UI가 아니라는 판단이 들어, dynamic-import로 별도의 chunk로 분리해 메인 번들 사이즈를 줄였다.

번들 사이즈의 경우 98.74% 감소했다.

성능의 경우 Blocking Time이 아예 사라졌고, Speed Index는 조금 늘었지만, LCP는 45.45% 감소했다.

여러 번 반복해 봐도 비슷한 수치를 보여줬다.