본문 바로가기

기술면접

27_Lazy loading & Code splitting

"Lazy loading"과 "Code splitting"은 둘 다 웹 개발에서 성능을 향상시키기 위해 사용되는 기술입니다.


✅ Lazy Loading:
Lazy loading은 필요할 때까지 자원을 로드하지 않고, 필요한 순간에 자원을 동적으로 로드하는 기법입니다. 주로 대규모 웹 애플리케이션에서 자주 사용됩니다. 이를 통해 초기 페이지 로딩 시간을 최적화할 수 있습니다. 대표적으로 이미지나 스크립트 파일 같은 리소스들을 예로 들 수 있습니다. 사용자가 스크롤링하거나 특정 이벤트를 발생시켰을 때 해당 이미지나 스크립트 파일을 로드합니다. 이로써 초기 로딩 시간을 줄이고 페이지의 성능을 향상시킬 수 있습니다.

✅ Code Splitting:
Code splitting은 애플리케이션의 코드를 여러 번으로 분할하는 기술입니다. 이를 통해 초기 로딩 시간을 줄이고 필요한 코드만 로드하여 사용자 경험을 최적화할 수 있습니다. 대규모 웹 애플리케이션에서는 전체 애플리케이션을 하나의 번들로 묶는 것이 아닌, 여러 개의 작은 번들로 나누어 관리합니다. 예를 들어, 사용자가 특정 기능을 요청했을 때 해당 기능에 필요한 코드만 로드하고, 다른 기능에 대한 코드는 나중에 필요할 때 로드합니다. 이로써 초기 로딩 시간이 단축되고, 사용자 경험이 향상됩니다.

두 기술 모두 웹 애플리케이션의 성능을 향상시키는 데 도움을 줍니다. Lazy loading은 자원을 필요한 시점에 로드하여 초기 로딩 시간을 최적화하고, Code splitting은 애플리케이션 코드를 여러 번들로 분할하여 필요한 코드만 로드하여 사용자 경험을 최적화합니다.