Lazy loading과 Code splitting에 대해 아는 만큼 설명해주실 수 있을까요?
레이지 로딩(lazy loading)은 필요 시점까지 객체의 초기화를 연기시키기 위해
컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴의 하나로
적절하게 사용될 경우 프로그램의 운영 차원에서 효율적이다.
코드 분할(Code Splitting)은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능이다.
비슷한 파일을 묶어서 하나의 파일로 만드는 것을 Bundling이라고 한다.
즉 js, css, html 각각을 하나의 파일로 묶어서 번들링 해준다.
번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 나누는 것이다.
앱이 커지면 번들 사이즈도 커진다.
특히 큰 규모의 서드 파티 라이브러리를 추가할 때 앱이 커지면서 로드 시간이 길어진다.
물론 각각의 파일을 하나로 묶어주어서 여러 개의 파일을 가져올 때 보다 훨씬 편해지겠지만
하나의 파일이 너무 용량이 커져버리면 오히려 가져오는데 더 오랜시간이 걸리고 힘들어진다.
대부분의 경우 사용자는 적어도 처음에는 전체 웹 페이지를 보지 못한다.
이러한 경우 이러한 구성 요소를 렌더링하면 응용 프로그램의 성능이 저하 될뿐만 아니라
많은 리소스가 낭비된다. (특히 이미지나 유사한 데이터를 많이 사용하는 콘텐츠가 있는 경우)
코드 분할은 lazy loading을 통해 앱 사용자에게 획기적인 성능 향상을 할 수 있다.
앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며
앱의 초기화 로딩에 필요한 비용을 줄일 수 있다.
