lazy loading 을 이해하기 위해서는 chunk 와 cashing 이라는 단어가 나옴
chunk 란?
- 웹팩에서, 애플리케이션 코드를 각각 다른 파일로 나눈것을 chunk라고 부른다.
- 하나의 번들 파일을 효과적으로 다루기 위해 여러가지의 파일로 다시 나누는 것
cashing 이란?
- 사용자가 서비스를 이용하기 위해 기다리는 시간을 최소화하기 위해 사용되는 것
역할 💪
사용자가 필요한 리소스들의 복사본
서버에 요청하는 횟수 감소
→ 리소스의 내용이 변하지 않는다면 같은 내용을 서버에 요청할 필요 없음
→ 리소스 복사본을 만들어 서버보다 더 가까운 위치에 두고 이 복사본을 클라이언트가 사용할 수 있도록 함
→ 재요청을 하지 않기 때문에 서버에 요청하는 횟수 감소
장점 👍
서버 : 많은 요청을 짧은 시간내에 처리하는 서버의 부하를 감소시킴
클라이언트 : 서버보다 가까운 위치에 있는 데이터를 가져오기 때문에 사용자에게 훨씬 빨리 리소스를 전달함
종류 🔩
Local Cache : 사용자가 서비스에 접속하는 환경에 있는 캐시
Ex. 웹 애플리케이션 서비스를 사용하기 위해 브라우저를 이용하는 경우, 브라우저에 담긴 캐시 == 로컬 캐시
브라우저가 캐싱을 구별하는 기준 : URL, 로드하는 리소스의 이름이 같을 경우 캐싱을 이용 → 이전 파일이 호출된 결과로 보여짐
lazy loading 이란?
Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐지게 되는데, 이 때 대형 프로젝트의 경우 파일 용량이 매우 크기 때문에 사용자는 웹 사이트를 처음 접속하게 될 때 큰 파일을 로드하느라 초기 렌더링 시간이 오래 걸리게 된다.
즉, 현재 보고 있는 화면과 무관한 내용까지 받아서 시간이 오래 걸리게 되는 것이다.
따라서, Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하는 방법이다.
prefetch
vue CLI3부터 prefetch 기능이 추가되었다. prefetch 기능은 미래에 사용될 수 있는 리소스를 캐시에 저장함으로써, 사용자가 접속할 때 빠르게 리소스를 내려줄 수 있다.
Lazy Load로 컴포넌트를 import하면 내부적으로 Vue CLI의 prefetch기능이 사용된다.
(prefetch 기능이 true로 설정되는 것이 디폴트값)
2) prefetch 적용 비교
prefetch는 상황에 맞게 사용해야 한다.
prefetch 기능을 사용하면 request 요청 수가 증가하고 비동기 컴포넌트로 정의된 모든 리소스를 캐시에 담기 때문에 request 요청 수가 많아진다. ⇒ 초기 랜더링 속도가 느려진다.
반면 prefetch 기능을 사용하지 않으면 요청 수가 훨씬 줄어든다.
이 기능을 사용하지 않으면 라우터가 이동될 때마다 라우터에서 필요한 리소스를 그때그때 가져오게 된다.
prefetch 적용 팁
사용자가 접속할 가능성이 높은 컴포넌트는 한 번에 다운로드할 수 있게 설정한다.
사용자의 접속 빈도가 낮은 컴포넌트는 prefetch를 적용하거나 사용자 접속 시점에서 리소스를 다운로드하게 설정하여 전체 애플리케이션에 대한 리소스를 내려받는 시점을 분리한다.
https://velog.io/@surim014/Webpack-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-3-Caching%EC%9D%B4%EB%9E%80
