문제 배경

• 프로젝트를 처음 개발할 당시, 코드 분할 기법에 대한 이해 없이 페이지와 컴포넌트를 계속 추가하면서 루트 페이지 접속 시 렌더링이 지연되는 문제가 발생하였다.

• 크롬 브라우저의 Lighthouse로 측정한 성능 점수는 50점 이하였고, 이는 개발 서버 기준임을 감안하더라도 최적화가 반드시 필요한 수준이었다.

  

• 번들링된 bundle.js의 크기가 약 3MB 이상으로 확인되었으며, 이는 실제로 사용자가 루트 페이지에서 필요하지 않은 모든 JS 파일을 한 번에 다운로드하기 때문에 발생한 문제로 판단되었다.

  

앞서 측정한 성능 지표는 다음과 같다.

• FCP(First Contentful Paint): 4.8초
• LCP(Largest Contentful Paint): 5.5초
• TBT(Total Blocking Time): 560ms

FCP, LCP 모두 매우 느린 수치였고, TBT 역시 사이트의 단순성을 감안하면 비효율적인 결과였다. 특히 사용자가 사이트에 처음 접속했을 때 오랜 시간 정적인 화면만 보게 되는 UX 저하 문제로 이어졌다.

개선 과정

원인 분석

• 가장 큰 문제는 초기 페이지에서 필요하지 않은 모든 JS 파일을 한 번에 불러온다는 점이었다. 실제로 라우트와 관련 없는 페이지 컴포넌트들까지 번들에 포함되면서, 초기 렌더링 시 불필요한 네트워크 대기 시간이 발생하고 있었다.
• 이를 해결하기 위해 코드 분할(Code Splitting) 기법을 도입하였다.

코드 분할 적용

React에서 공식적으로 지원하는 lazy() 함수와 Suspense 컴포넌트를 사용하여 각 페이지 단위로 동적 import를 적용하였다. 또한 react-router-dom의 각 라우트 항목에 대해 Suspense로 감싸면서 fallback 컴포넌트를 제공하여 사용자 경험을 향상시켰다.

const Home = lazy(() => import('../pages/Home/Home'));
...
{
  path: "/localfood",
  element: (
    <Suspense fallback={<PageLoading />}>
      <LocalFoodPage />
    </Suspense>
  )
}