웹 성능 최적화 Code-Splitting & lazy-loading // webpack vs react.lazy

리액트에서 Lazy Loading을 구현하는 방법은 주로 코드 스플리팅(Code Splitting)을 통해 비동기적으로 컴포넌트를 불러오는 것 이다. 코드 스플리팅은 애플리케이션 번들을 더 작은 조각으로 나누어 필요한 컴포넌트를 필요한 시점에 로드할 수 있게 해준다.

lazy-loading과 Code Splitting에 들어가기 전에 번들링이 무엇인지 알아보자.

React 번들링/ webpack

코드 splitting이 필요한 이유? + lazyloading

코드 스플리팅(Code Splitting)
은 웹 애플리케이션의 JavaScript 코드를 여러 부분으로 나누는 기술입니다. 이를 통해 사용자가 웹 페이지를 방문할 때 한 번에 모든 JavaScript 코드를 다운로드하는 대신 필요한 코드 조각만 로드할 수 있습니다. 이로 인해 초기 로딩 시간이 단축되고 사용자 경험이 향상됩니다.

Lazy Loading
은 코드 스플리팅의 한 형태로, 필요한 코드를 "게으르게" 또는 "지연해서" 로드하는 개념입니다. 주로 모듈 또는 컴포넌트 수준에서 사용됩니다. 사용자가 특정 기능이나 페이지로 이동하거나 특정 이벤트를 트리거할 때 해당 모듈 또는 컴포넌트가 로드됩니다.

작은규모의 프로젝트는 webpack에 의한 lazy-loading이 좋을까 react.lazy에 의한 lazy-loading이 좋을까?

나의 목표는 초기 로딩속도를 향상시키는 것이 였다.

React.lazy 및 Suspense 사용:

1. CRA에서 이미 제공하는 기능입니다.
2. 작은 규모의 프로젝트에서도 사용 가능하며, 코드 스플리팅을 쉽게 구현할 수 있습니다.
3. 간단하게 컴포넌트 수준의 lazy-loading을 구현할 수 있습니다.
4. 프로젝트 초기 설정을 간단하게 유지하고 번들링 설정에 대한 걱정을 덜 수 있습니다.

Webpack의 코드 스플리팅 및 동적 임포트 사용:

1. CRA의 기본 설정을 벗어나서 더 많은 제어를 원하는 경우 선택할 수 있습니다.
2. 더 복잡한 코드 스플리팅 시나리오를 구현할 수 있습니다.
3. 더 큰 규모의 프로젝트나 성능 최적화가 필요한 경우 유용합니다.
4. 번들링 설정에 대한 더 많은 커스터마이징이 가능합니다.

따라서 작은 규모의 프로젝트에서는 CRA의 React.lazy와 Suspense를 사용하는 것이 간단하고 편리할 거 같다는 생각이 들었다.
필요한 경우 나중에 더 복잡한 번들링 및 동적 로딩 기능을 추가로 구현할 수 있기 때문에 큰 규모의 프로젝트나 특별한 요구 사항이 없는 한 CRA에서 제공하는 기능을 활용하기로 했다.