Lazy loading과 Code splitting

Lazy loading이란?

페이지를 불러오는 시점에 당장 필요하지 않은 리소스들을 추후에 로딩하게 하는 기술,

즉 사용자가 보지 않는 것들을 당장 로딩하지 않는다. 그러다가 나중에 사용자가 필요로 하는 시점에 로딩하는 것이다.

 

Lazy loading을 사용하지 않았을때의 문제점

Lazy-loading 없이 구현된 웹 페이지를 사용자가 접근하면 그 안에 있는 내용이 모두 다운로드 된다.
만약 사용자가 웹 페이지의 모든 컨텐츠를 실제 이용한다면 첫 로딩이 조금 느리더라도 문제가 크진 않다.
하지만 만약 최상단의 이미지만 확인하고 나가버리면 낭비가 발생한다.

 

예시

1. Image Lazy Loading

Image Lazy Loading은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 할 수 있도록 하는 테크닉이다. 웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이라 볼 수 있다. 이 방식은 웹 성능과 디바이스 내 리소스 활용도 증가, 그리고 연관된 비용을 줄이는데 도움을 줄 수 있다.

• image placeholder
  placeholder는 실제 이미지가 로딩될 때까지 해당 이미지 자리에 대신 표시할 요소를 말한다. 보통 개발자들은 이미지의 단색 이미지를 사용하거나 모든 이미지에다가 대체할 특정 이미지를 넣는 방식으로 구현한다.

2. 무한스크롤

---

Code splitting

하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미한다. 그리고 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 필요에따라 특정한 컴포넌트만 로딩하거나, 병렬로 로딩하여 더 빠른 속도로 화면을 로드하기 위해서이다.