[React] Lazy Loading

Wynter24·2023년 11월 18일
0

Lazy Loading

중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술

목적

  • 최초 페이지 로딩 시간 개선
  • 최초 데이터 전달 양 감소

사용법

  1. React.lazy() 메소드 (리액트 내장 기능)
    ☑️사용 예시
    - 코드 분할 (Code Splitting)
    주로 큰 리액트 애플리케이션에서 번들 크기를 최적화하고 초기 로딩 시간을 단축하기 위해 사용
    - 페이지 기반 로딩
    특정 페이지에 필요한 컴포넌트만 로딩하여 초기 로딩 성능 향상
    ☑️사용 이유
    - 번들 최적화
    큰 앱에서 모든 컴포넌트를 처음부터 불러오는 것이 아니라 필요할 때 비동기적으로 불러오기 때문에 번들 크기가 작아지고 초기 로딩 시간 감소
    - 효율적인 리소스 사용
    사용자가 특정 기능이나 페이지에 접근할 때만 해당 컴포넌트를 로드하므로, 필요하지 않은 리소스를 불러오지 않아 효율적
  1. react-lazyload 라이브러리
    ☑️사용 예시
    - 이미지나 다른 리소스의 지연 로딩
    특히 스크롤이 아래로 내려갈 때 화면에 나타나는 이미지 등을 지연 로딩하여 초기 로딩 성능 향상
    - 스크롤 최적화
    스크롤 시에만 필요한 컴포넌트나 리소스를 로딩하여 스크롤 경험 최적화
    ☑️사용 이유:
    - 이미지 최적화
    페이지 로딩 시에 모든 이미지를 동시에 불러오지 않고, 스크롤 시에 필요한 이미지만 늦게 로딩하여 초기 로딩 속도 향상
    - 스크롤 경험 최적화
    사용자가 스크롤하는 동안 필요한 부분만 로딩되므로, 초기 페이지 로딩 속도와 스크롤 성능 최적화

정리

크고 복잡한 애플리케이션에서는 React.lazy()

큰 앱에서 번들 크기를 최적화하고 초기 로딩 속도를 향상시키기 위해 코드 분할이 필요할 때 사용

이미지나 다른 리소스의 지연 로딩에는 react-lazyload

이미지나 특정 리소스의 지연 로딩이 필요한 경우, 특히 스크롤과 관련된 최적화가 필요한 경우에 사용


참고자료
레이지로딩(lazy loading)이란?

profile
내가 다시 보려고 쓰는 개발.log

0개의 댓글