Lazy Loading
중요도가 떨어지거나 당장 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 퍼포먼스를 최적화하는 기술
목적
- 최초 페이지 로딩 시간 개선
- 최초 데이터 전달 양 감소
사용법
- React.lazy() 메소드 (리액트 내장 기능)
☑️사용 예시
- 코드 분할 (Code Splitting)
주로 큰 리액트 애플리케이션에서 번들 크기를 최적화하고 초기 로딩 시간을 단축하기 위해 사용
- 페이지 기반 로딩
특정 페이지에 필요한 컴포넌트만 로딩하여 초기 로딩 성능 향상
☑️사용 이유
- 번들 최적화
큰 앱에서 모든 컴포넌트를 처음부터 불러오는 것이 아니라 필요할 때 비동기적으로 불러오기 때문에 번들 크기가 작아지고 초기 로딩 시간 감소
- 효율적인 리소스 사용
사용자가 특정 기능이나 페이지에 접근할 때만 해당 컴포넌트를 로드하므로, 필요하지 않은 리소스를 불러오지 않아 효율적
- react-lazyload 라이브러리
☑️사용 예시
- 이미지나 다른 리소스의 지연 로딩
특히 스크롤이 아래로 내려갈 때 화면에 나타나는 이미지 등을 지연 로딩하여 초기 로딩 성능 향상
- 스크롤 최적화
스크롤 시에만 필요한 컴포넌트나 리소스를 로딩하여 스크롤 경험 최적화
☑️사용 이유:
- 이미지 최적화
페이지 로딩 시에 모든 이미지를 동시에 불러오지 않고, 스크롤 시에 필요한 이미지만 늦게 로딩하여 초기 로딩 속도 향상
- 스크롤 경험 최적화
사용자가 스크롤하는 동안 필요한 부분만 로딩되므로, 초기 페이지 로딩 속도와 스크롤 성능 최적화
정리
크고 복잡한 애플리케이션에서는 React.lazy()
큰 앱에서 번들 크기를 최적화하고 초기 로딩 속도를 향상시키기 위해 코드 분할이 필요할 때 사용
이미지나 다른 리소스의 지연 로딩에는 react-lazyload
이미지나 특정 리소스의 지연 로딩이 필요한 경우, 특히 스크롤과 관련된 최적화가 필요한 경우에 사용
참고자료
레이지로딩(lazy loading)이란?