Vue Lazy Load(비동기 컴포넌트) / prefetch 기능

1. Lazy Load 사용 목적

Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐지게 되는데, 이 때 대형 프로젝트의 경우 파일 용량이 매우 크기 때문에 사용자는 웹 사이트를 처음 접속하게 될 때 큰 파일을 로드하느라 초기 렌더링 시간이 오래 걸리게 된다.
즉, 현재 보고 있는 화면과 무관한 내용까지 받아서 시간이 오래 걸리게 되는 것이다.
따라서, Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하는 방법이다.

2. prefetch

vue CLI3부터 prefetch 기능이 추가되었다. prefetch 기능은 미래에 사용될 수 있는 리소스를 캐시에 저장함으로써, 사용자가 접속할 때 빠르게 리소스를 내려줄 수 있다.
Lazy Load로 컴포넌트를 import하면 내부적으로 Vue CLI의 prefetch기능이 사용된다.
(prefetch 기능이 true로 설정되는 것이 디폴트값)

1) 주의할 점

prefetch 기능을 사용하는 이유는 렌더링 시간을 줄이기 위해서인데 잘못 사용하면 오히려 렌더링 시간이 늘어날 수 있다. 비동기 컴포넌트로 정의된 모든 리소스를 당장 사용하지 않더라도 캐시에 담는 비용이 발생하기 때문이다. 즉, 별도로 분리된 chunk파일 각각에 대한 request가 일어나고, 각각의 파일을 다운로드하여 캐시에 저장하게 된다.

2) prefetch 적용 비교

prefetch는 상황에 맞게 사용해야 한다.
prefetch 기능을 사용하면 request 요청 수가 증가하고 비동기 컴포넌트로 정의된 모든 리소스를 캐시에 담기 때문에 request 요청 수가 많아진다. ⇒ 초기 랜더링 속도가 느려진다.

반면 prefetch 기능을 사용하지 않으면 요청 수가 훨씬 줄어든다.
이 기능을 사용하지 않으면 라우터가 이동될 때마다 라우터에서 필요한 리소스를 그때그때 가져오게 된다.

아래는 prefetch를 사용한 경우와 prefetch를 사용하지 않은 경우 Load 타임입니다.

3) prefetch 적용 팁

사용자가 접속할 가능성이 높은 컴포넌트는 한 번에 다운로드할 수 있게 설정한다.
사용자의 접속 빈도가 낮은 컴포넌트는 prefetch를 적용하거나 사용자 접속 시점에서 리소스를 다운로드하게 설정하여 전체 애플리케이션에 대한 리소스를 내려받는 시점을 분리한다.

3. prefetch 기능 제거하기

1) vue.config.js 파일 추가 (설정 파일)

경로는 아래와 같다.

하단 코드를 추가해서 플러그인을 제거한다.

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

2) prefetch가 제대로 제거되었는지 확인하기

vue inspect --plugin prefetch 명령어를 날려서 확인한다.

$ vue inspect --plugin prefetch
/* config.plugin('prefetch') */
new PreloadPlugin(
  {
    rel: 'prefetch',
    include: 'asyncChunks'
  }
)

> // prefetch 기능이 비활성화된 경우 
$ vue inspect --plugin prefetch
undefined

#### 3) prefetch 기능이 비활성화된 경우

아래와 같이 /* webpackPrefetch: true */ 주석을 달면 prefetch 기능이 켜진다.

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