angular optimization 3탄(앵귤러 최적화)

- Lazy Loading Modules

구성

[참고 1] lazy loading 구성방법

---

비교 테스트

[참고 2] lazy loading 적용 x

 

[참고 3] lazy loading 적용 o

 

- 요약 -

[참고 2], [참고 3]의 lazy loading 적용 전 후의 내용을 보면 [참고 2]의 적용전에는 customers 컴포넌트의 내용과 orders의 내용이 main.js의 포함이 되어서 파일용량이 352KB인 것을 확인할 수 있고, [참고 3]은 main.js는 13.4KB 이고, Customers와 Orders를 클릭했을 때 모듈을 로드해서 가져오기 때문에 용량이 차이나고 따로 분리되어있는 것을 확인할 수 있다.

 

첫 화면 로드시의 main.js의 파일을 불러오는데 이 파일이 큰 경우에 첫 로드 속도가 느려지는 문제가 발생하므로 lazy loading을 적용시켜 모듈을 분리하여야 첫 페이지 로딩 속도가 빨라진다.