lazy loading : dynamic import

Eager loading

• 즉시 로딩
• 로딩화면을 표시해주며 열심히 로딩한다.

 

lazy loading

지연 로딩, 게으른 로딩

• 성능을 개선하고 시스템의 resource를 절약하는 기법이다.
• 필요한 페이지에 들어가면(스크롤, 일부 상호작용) 그제서야 로딩을 한다.
• image, video, iframe, library등에 사용할 수 있다.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

• auto: 속성을 포함하지 않는 것과 동일한 브라우저의 기본 지연 로딩 동작입니다. 사용하지 않는 걸 추천한다
• lazy: 뷰포트로부터 계산된 거리에 도달할 때까지 리소스 로딩을 지연시킵니다.
• eager: 페이지에서의 위치에 관계없이 리소스를 즉시 로드합니다.

---

처음 표시되는 뷰포트에 있는 이미지에 대해 loading=lazy 설정을 피해야 합니다.

 

dynamic import

• run time시 필요한 module을 동적으로 import한다.
• Promise 를 반환 하며, export 하는 값들을 가진 객체를 반환한다.

 

경험담

Next.js는 SSR을 하는데 사용하던 Editor 라이브러리가 SSR을 지원해주지 않아서 에러가 발생을 했었다.

Next.js의 dynamic import를 사용해 lazy loading을 구현해 해당 페이지에 들어가면 그때 Editor가 브라우저에서 생성이 되게끔 하였습니다.

 

 

ref

https://www.imperva.com/learn/performance/lazy-loading/

https://web.dev/i18n/ko/browser-level-image-lazy-loading/