lazy loading | 초기 로딩 시간을 단축하자

Lazy Loading이란?

• 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루고, 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록
• 즉, 내가 미리 결정해둔 조건이 충족될 때까지 UI 렌더링을 차단할 수 있다

Lazy Loading을 사용하는 이유

• ⭐ 웹 성능 향상
• Lazy Loading이 웹 성능 향상에 도움이 되는 이유들
  1. 초기 로드 시간 최소화
     • 초기 로드 시 필요하지 않은 리소스들(JS파일, 이미지 파일, …)은 나중에 필요한 시점에 로드함으로써, 초기 로딩 시간을 단축
  2. 자원 사용 최적화
     • 웹 페이지에 있는 모든 리소스를 한번에 로드하면 사용자가 실제로 필요로 하는 리소스가 아니더라도 로드
     • 하지만 lazy loading을 적용하면, 필요한 리소스만 로드하여 리소스 사용 최적화 가능
     • 사용자가 스크롤링하거나 특정 이벤트가 발생했을 때 필요한 리소스들을 동적으로 로드 가능
  3. 사용자 경험 개선
     • lazy loading을 사용하면 초기 로딩 시간을 최소화, 필요한 리소스를 적시에 로드하여 사용자 경험 향상
     • 페이지가 빠르게 로드되고, 사용자가 필요한 요소를 볼 수 있는 순간부터 콘텐츠를 제공할 수 있기 때문

Lazy Loading - Code Splitting - Suspense

• 초기에 페이지에 접속하면 웹펙으로부터 번들링된 js 파일을 받는다
• 이때 번들링에는 모든 컴포넌트 포함
  • 여기에 fetching까지 이루어진다면, 사용자가 초기에 웹페이지를 보는 시점이 매우 늦어질 것
• lazy loading은 코드를 분할해서 모든 컴포넌트가 번들링된 파일을 받는 것이 아니라 필요할 때 동적으로 컴포넌트를 불러오는 것
• 컴포넌트를 동적으로 import 하려면 Promise의 상태를 처리해야 한다
• 초기 렌더 시간이 오래걸리는 문제를 해결 가능
• lazy loading을 적용한 페이지를 동적으로 import할 때, Suspense가 이를 감지해 fallback 컴포넌트를 대신 보여준다

Code Splitting

React에서 Code Splitting(코드 분할)이란?

• Code Splitting은 Webpack같은 번들러에서 지원하는 기능
• 런타임에 동적으로 로드할 수 있는 여러 번들을 생성 가능
• 코드 분할은 React.lazy 및 Suspense 같은 도구를 사용하여 의존성을 느리게 로드하고, 사용자가 필요할 때만 로드하는 것도 가능

⭐ 초기 로딩 시간을 단축하기 위해 사용

React에서 코드 분할을 하는 방법

1. Dynamic imports (동적 import)

   • 리소스를 동적으로 로드하는 기능
   • 필요한 시점에 필요한 리소스만 로드하여 성능을 향상
   • 초기 번들 크기를 줄이고 필요한 리소스만 비동기적으로 로드 → 초기 로딩 속도 향상

   import('./MyComponent').then((module) => {
     const MyComponent = module.default;
     // 모듈 로드가 완료된 후에 실행될 코드
   });

2. React.lazy

   • React의 내장함수
   • 동적으로 컴포넌트를 로드하기 위해 사용
   • Lazy Loading을 구현하기 위해 사용
   • 필요한 컴포넌트가 화면에 나타나기 전까지 로딩을 지연

   const OtherComponent = React.lazy(() => import('./OtherComponent'));

   • React.lazy는 Dynamic import를 호출하는 함수를 인자로 가진다 → Promise 반환 대기

3. Route-based code splitting (경로 기반 코드 분할)

   • 특정 경로로 이동할 때 해당 경로에 필요한 모듈만 로드
   • React.lazy를 사용하여 경로 기반 코드 분할을 수행 가능

   import React, { Suspense, lazy } from 'react';
   import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
   
   const Home_ = lazy(() => import('./routes/Home'));
   const About_ = lazy(() => import('./routes/About'));
   
   const App = () => (
     <Router>
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route exact path="/" element={<Home/>}/>
           <Route exact path="/about" element={<About/>}/>
         </Routes>
       </Suspense>
     </Router>
   );
   export default App;

Suspense

• React.lazy 혹은 Data Fetching처럼 비동기식으로 컨텐츠가 로드되는 동안 대체 표시

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>

• 하위 항목에 필요한 모든 코드와 데이터가 로드될 때까지 로딩 fallback을 표시
• 렌더링할 준비가 될 때까지 React는 가장 가까운 Suspense 경계를 전환
  • 대체 요소인 구성 요소를 표시
• 그런 다음, 데이터가 로드되면 React는 fallback을 숨기고 불러온 데이터를 기반으로 렌더링

참고 문서

• Code splitting
• Code Splitting in React
• How Do You Split Bundle Using Code Splitting in ReactJS
• syoung125-Image Lazy Loading 구현하기
• bnb8419-React Suspense와 lazy Loading
• react.dev-Suspense