[ Vue.js ] 실무 팁 ▶ prefetch 짧게 이해하기, Lazy Load, vue-cli 3, router

 

Vue.js Cli 3 부터 prefetch 기능이 추가 되었습니다!

 

■ prefetch란?

pre + fetch 로, fetch를 선행한다는 뜻입니다. 
기본적으로 Vue.js에서는 prefetch = true로 설정되어져 있고, 이를 vue.config.js 에서 수정이 가능합니다.
브라우저가 미리 캐시(cache) 하는 것으로, 브라우저를 사용하는데에 빠르다고 느낄 수 있다.

vue.config.js 에서 prefetch 제거하기

 

■ 사용 목적

1. 렌더링 시간 단축
    => 하지만, 잘못 사용 시 오히려 렌더링 시간이 증가하게 된다. 

 

■ 특징

- Lazy Load가 적용된  Components는 모두 prefetch 기능이 적용 된다. (= 캐시가 미리 저장된다)
- 비동기 컴포넌트로 정의된 모든 리소스들을 캐시에 담기 때문에 요청(request) 수가 증가한다.
- 초기 화면은 오히려 느림
    => 마지막에 다운로드 받기 때문이다.
        => 따라서 초기 렌더링은 prefetch를 사용하지 않는 것이 더 빠르다.

 

■ 추가

- Vue Application 개발 시 기본적으로 prefetch는 끄는 것을 권장한다.
- vue-router에서 주석으로 처리된 "webpackPrefetch: true" 를 넣어주면 prefetch가 적용된다.

main.js