Vue Lazy Load(비동기 컴포넌트)란?

1. Lazy Load 사용하는 목적

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

Lazy Load는 Lazy '가능한 길게 일을 미루는 행위'란 의미에 Load 단어를 합쳐 페이지 내에서 실제로 필요할 때까지 리소스 로딩을 미루는 것입니다.

 

---

2. prefetch

vue-cli3 부터 prefetch 기능이 추가되었습니다. prefetch 기능은 미래에 사용될 수 있는 리소스를 캐시에 저장함으로써, 사용자가 접속할 때 빠르게 리소스를 내려줄 수 있습니다.

Lazy Load로 컴포넌트를 import 하면 내부적으로 Vue CLI의 prefetch 기능이 사용됩니다. (기본값으로 prefetch 기능이 true로 설정됨)

2-1. 주의점

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

2-2. prefetch 적용 비교

prefetch는 상황에 맞게 사용해야합니다.

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

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

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

 

 

• prefetch 사용한 경우 : 883ms

• prefetch 사용하지 않은 경우 : 648ms

2-3. prefetch 적용 팁

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

 

---

3. prefetch 기능 제거하기

3-1. vue.config.js 파일 추가

경로는 아래와 같습니다.

아래 코드를 추가해서 플러그인을 제거합니다.

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

 

3-2. prefetch가 제대로 제거되었는지 확인

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

# prefetch 기능이 활성화된 경우 
$ vue inspect --plugin prefetch
/* config.plugin('prefetch') */
new PreloadPlugin(
  {
    rel: 'prefetch',
    include: 'asyncChunks'
  }
)

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

3-3. prefetch 기능 끄고 특정 컴포넌트 prefetch 적용

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

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

 

 

 이번 시간에는 lazy load에 대해서 알아보고 prefetch에 대해서 알아보았습니다. 다음 시간에는 vue lazy load 실습을 통해 lazy load에 대해서 자세하게 이해해 봅시다.