[ React ] Lazy Loading 과 Code Splitting

Code Splitting

코드 스플리팅이라는 것은 Webpack, rollup, browserify 와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 번들 파일로 나누는 것을 의미한다.

하나의 번들 파일을 여러 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서이다.

번들러를 사용하는 이유는 브라우저에서 호출하는 파일 개수를 줄여 부하 발생 방지를 위해 번들러를 사용하는데, 프로젝트 규모가 커지면서, 번들링 크기도 커지고 이는 즉 번들 파일 로딩 시간이 길어지는 결과가 발생한다.

이래서 하나의 번들 파일을 여러개로 나눈 뒤, 실제 로드되는 화면의 번들 파일만 불러오고 나머지는 지연 시킴으로 더 빠른 화면을 보여줄수 있게 된다. ( Lazy Loading )

Lazy Loading

Lazy Loading 이란 게으르게 로딩 한다는 뜻으로, 로딩을 바로 하지 않고 지연 시켰다가 나중에 로딩하게 해주는 방법이다.

이 방법을 사용하는 이유는 모든 데이터를 한번에 로딩하면 로딩 시간이 오래 걸리기 때문에 일단 viewport 에 보이는 데이터만 로딩하고 나머지는 천천히 로딩하여, UX를 개선하는 방법이다.