[Angular] Lazy Loading (지연 로딩)과 Preloading (사전 로딩)

공부한 것을 정리하는 느낌으로 쓴다.

 

애플리케이션의 용량이 클수록 첫 페이지가 표시되기까지 필요한 코드의 양을 줄이는 것이 중요

코드의 양이 적을수록 파일을 내려받는 시간이 짧아져서 첫 페이지가 더 빨리 표시되기 때문

특히, 모바일 애플리케이션은 네트워크 속도가 느리고, 인터넷 연결이 잘 안되는 지역이 많아 주의가 더 필요

 

 

Lazy Loading (지연 로딩)

애플리케이션에서 자주 사용하지 않는 모듈이 있다면 이 모듈을 필요할 때 따로 내려받아 불러 올 수 있는 것

 

Angular에서는 애플리케이션을 모듈 단위로 쉽게 나눌 수 있으므로, 일부 기능을 애플리케이션이 시작될 때 바로 불러오거나, 필요할 때 불러오거나 할 수 있음

 

루트 모듈(app.module.ts)은 지연 로딩의 대상이 될 수 없음

 

라우팅 모듈(app-routing.module.ts) 파일에서 loadChildren을 이용하여 lazy loading을 구현할 수 있음

 

Preloading (사전 로딩)

백그라운드에서 앱의 일부를 미리 로드하여 UX를 개선

모듈 또는 component data를 미리 로드할 수 있음

 

앱의 일부를 백그라운드에서 로드하기 때문에 사용자가 경로 이동 시에 모듈이 다운되어 기다리는 현상이 사라짐

 

라우팅 모듈에서 PreloadAllModules을 이용하여 preloading을 구현할 수있음