[VueJS] Lazy Load (비동기 컴포넌트) 구성 방법

Lazy load

VueJS같은 프론트엔드 프레임워크는 처음에 프로젝트와 관련된 현재 보고 있는 화면과 무관한 것들까지 모든 리소스를 한번에 다운받는다. 프로젝트가 크면 리소스 다운받는 시간이 늘어나게 된다. Lazy load는 리소스를 컴포넌트 단위로 분리시켜주고, 컴포넌트 혹은 라우터 단위로 필요한 것들만 다운받을 수 있도록 한다.

 

장점

소스코드가 업데이트되었을 경우, 분산되어 있지 않다면 js를 다시 다운받아야 하지만 분산되어 있다면 관련 파일만 변경하여 다운받게 된다.

 

설정

index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [

// Lazy Load 사용 안하는 경우
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  
// Lazy Load 사용 하는 경우
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

 

 

 

---

 

Prefetch

vue-cli3부터 prefetch 기능 추가

Prefetch 선언된 리소스는 브라우저가 미리 캐시해놓는다.

리소스를 다운받게 될 때, 브라우저에 캐시된것을 받기 때문에 매우 빠르게 받을 수 있다.

브라우저 캐시는 페이지 로드가 끝난 이후에 사용자도 모르게 브라우저 유휴시간을 활용하여 진행한다.

 

단점

Prefetch를 적용하였을 경우 그렇지 않았을 경우보다 첫 로딩 시 DOM Loaded 타임이 큰 차이가 날 수 있다.

 

Prefetch 설정

prefetch를 설정하지 않았을 경우 디폴트로 켜진다.

 

Pregetch 설정 끄는 방법

vue.config.js

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

 

특정 리소스 prefetch 적용 방법

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