Vue.js - Lazy Load 적용하기 (비동기 컴포넌트)

큰 프로젝트의 경우 Vue CLI로 빌드하여 소스코드가 하나의 파일로 합쳐지면, 초기 랜더링 시간이 오래걸려 사용자 경험을 해칠 수 있다. 

 

Vue.js 에서 Lazy Load는 리소스를 컴포넌트 단위로 분리 -> 컴포넌트 또는 라우터 단위로 필요한 것들만 그때 그때 다운 받을 수 있게 하는 방법이다.

 

Vue CLI3부터 prefetch 기능이 추가되었다.

 

prefetch는 미래에 사용될 수 있는 리소스(예: 비동기 컴포넌트)를 캐시에 저장하여, 사용자가 접속했을 때 리소스를 빠르게 내려조는 기능이다. but 비동기 컴포넌트로 정의된 리소스를 (사용하지 않을수도 있는데) 전부 캐시에 담는 비용이 발생한다. 별도 분리된 chunk 파일 마다 각각 request 가 일어나고... 각각 다운로드 받아서 캐시에 저장하니... 오히려 랜더링 시간이 늘어날 수도 있다.  

 

라우터에서 아래와 같이 component를 import 하는 방식의 lazy load는 Vue CLI의 prefetch 기능이 사용된 것이다. 

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

 

Vue CLI에서 prefetch 기능의 기본값은 true. lazy load 적용된 (비동기) 컴포넌트는 모두 캐시에 저장된다. but prefetch 기능을 사용하면 request 요청 수가 늘어난다는 것을 알아야 한다. (캐시에 담을라고 각각 request...)

 

이 때문에 초기 랜더링은 prefetch를 사용하지 않아야 더 빨리 로딩된다. 

 

그렇다면 prefetch 기능을 끄는 방법은?

Vue.config.js 파일을 생성하고 다음 코드를 추가한다.

module.exports = {
	chainWebpack: config => {
    	config.plugins.delete('prefetch');
    }
}

 

prefetch 기능을 삭제한 뒤에 비동기 컴포넌트를 쓰고 싶다면, 컴포넌트를 import 할 때 /* webpackPrefetch: true */ 주석을 넣어주면 해당 컴포넌트에 대해 prefetch가 적용된다. 기본적으로 prefetch 기능은 끄고, 꼭 필요한 컴포넌트만 이렇게 주석을 사용하는 걸 추천.

import(/* webpackPrefetch: true */ './views/About.vue');