React lazy에 대해 질문드려요

Question

안녕하세요 프론트엔드를 공부하고 있는 초보 개발자입니다
제 사이드 프로젝트 App.js에는 총 13개의 페이지를 Routes안에서 처리해주고 있습니다 리엑트 공식문서를 보고 따라해봤는데
콘솔 네트워크 탭에서 봐도 초기 로딩속도는 약 2.2~2.6초 였습니다. 이걸 전부 lazy로 바꾸니 확실히 1.3~1.47초가 나오더라구요

여기서 궁금한 점이 있습니다

1. 초기 로딩 속도를 줄이긴했는데 더 많은걸 request하고 있더라구요 lazy 전에는 네트워크 요청 쿼리랑 이미지 리소스가 떴다고 하면 lazy 후에는 뭔가 그 패키지들의 이름이 쫘르륵 나오면서 17개 였던게 27개가 됐어요 근데 속도는 더 잘나와요 이게 맞는건가요 ?

2 . 메인페이지에서 굳이 상세 페이지나 다른 페이지를 초기에 받아오지않아서 초기 로딩 속도를 줄여주는건 알았는데 반대로 사용자가 다른 페이지에 갈때마다 그 페이지를 다시 받아와야하는걸로 알고 있습니다 그 부분은 로딩 스피너로 구현을 해놨는데 프로젝트 규모에 따라서 lazy를 해주고 안해주고의 차이인가요?

조용구 · Accepted Answer

안녕하세요 :)

1번
페이지 자체를 lazy 처리하면 리소스는 요청하지 않아서 갯수는 줄어야 하는데, 요청 갯수가 늘어난 이유는 모르겠어요.
하지만 요청 갯수가 늘어나도 각 파일의 용량이 줄어들면 속도가 빨라질 수 있습니다. 브라우저에서 리소스를 10개 정도 동시 요청하는데, 원인이 이 부분일 가능성 있습니다.

2번
SPA로 동작하게 될거라 해당 페이지에서 필요한 리소스만 요청하게 될거예요. 그래서 로딩 처리를 하지 않아도 충분히 빠르게 읽어올거예요.
페이지 자체가 해비하면 페이지 초기 렌더링 후 필요한 부분만 로딩 처리하곤 합니다.

포크코딩 · Answer

1. lazy loading 구현 방식에 따라 차이가 있습니다. 속도냐 비용이냐 기준이 무엇인지 모르겠어서 이게 맞느냐라는 질문에 답변 드리기 어렵습니다.

2. 해당 기술은 보통 사용자 경험이랑 관련이 있다고 생각합니다. 프로젝트 규모 같은 요소는 상관없습니다.