[React] Lazy loading과 Code splitting - 적당히 적당히 가져오자

일단! Lazy loading의 필요성부터

사용자가 웹 페이지를 열면 SPA에서는 전체 페이지의 내용이 다운로드 되어 단일 이동으로 렌더링됩니다.

→ 이를 통해 브라우저는 웹페이지를 캐싱할 수 있지만, 사용자가 다운로드한 모든 콘텐츠를 다 본다는 보장은 없죠?

 

예를 들어, 갤러리 전체 사진을 다운로드했지만 사용자는 첫 번째 이미지만 본 후 서비스를 이탈했을 때 웹 페이지에서는 메모리 및 대역폭 낭비로 이어질 것입니다.

 

💡 페이지에 접근할 때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 접근할 때 그 콘텐츠를 로드할 수 있다면 어떨까요? 즉, 로딩을 지연할 수 있다면?

 

Lazy loading이란?

Lazy loading은 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 미루고, 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 합니다. 결론적으로는 초기 로딩 시간이 단축될 것이며 사용자는 더 빠르게 화면을 볼 수 있게 될 것입니다.

 

장점

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

 

그래서 lazy loading을 왜 써야하는지는 알겠고, 어떻게 동작하고 어떻게 사용하는지 알아봅시다 :)

Code Splitting

우리가 위에서 lazy loading에 대해 너무 커진 리소스를 일부는 미뤄두고 필요할 때 로드한다고 했었습니다. 이 문장을 잘 읽어보면 잘라놓고 나중에 가져온다고 생각할 수도 있겠는데요.

 

Code splitting은 애플리케이션의 번들 파일을 여러 개의 작은 조각으로 나누는 기술입니다. 이를 통해 초기 로딩 시간을 줄이고 필요한 코드만 로딩하여 성능을 향상시킬 수 있는데요.

 

React에서는 React.lazy를 통해 코드 분할 기능을 제공합니다. React.lazy를 사용하면 컴포넌트를 동적으로 로딩할 수 있으며, 필요한 컴포넌트만 로드하여 초기 번들 크기를 줄일 수 있습니다. 이를 통해 애플리케이션의 초기 로딩 속도를 향상시킬 수 있겠죠?

 

→ React.lazy와 웹팩의 번들링 모두 코드 분할을 사용하여 애플리케이션의 성능을 최적화합니다. 그러나 React.lazy는 React 컴포넌트의 동적 로딩을 지원하는 반면, 웹팩의 번들링은 애플리케이션의 전체적인 모듈 번들링을 담당합니다.

 

React에서 code splitting을 하는 방법

1. Dynamic imports (동적 import)

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

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

 

2. React.lazy

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

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

 

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를 하게 되면 특정 페이지에 접근했을 때 어쨌든 그 리소스를 불러오기까지의 시간이 필요할 것입니다. 이럴 때 Suspense를 통해 비동기식으로 컨텐츠가 로드되는 동안 대체를 표시하는 것이 가능합니다.

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

하위 항목에 필요한 모든 코드와 데이터가 로드될 때까지 로딩  fallback을 표시합니다. 렌더링할 준비가 될 때까지 React는 가장 가까운 Suspense 경계를 전환하며 대체 요소인 fallback 요소를 표시합니다. 그런 다음, 데이터가 모두 로드되면 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