[Vue] Lazy Load 적용하기(비동기 컴포넌트)

 

React, Vue 모두 CLI(command-line interface)를 통해 신규 프로젝트를 생성할 수 있게 제공하고 있습니다.  vue 역시 CLI를 통해 프로젝트를 설치하기 위해선 아래의 명령어를 터미널에 입력하면 CLI를 통해 프로젝트를 설치할 수 있습니다.

 

💡 CLI 설정하기

✔ Install

npm install -g @vue/cli
# OR
yarn global add @vue/cli

✔ Create a project

vue create my-project
# OR
vue ui

 

👍 프로젝트 설치

정상적으로 프로젝트를 설치하면 'default'와 'Manully' 옵션이 있는데 이 중 Manully 옵션을 선택하여 들어가게 되면 Vue에서 우리가 원하는 옵션을 선택하여 설치할 수 있습니다. 

프로젝트에서 우리는 Router기능을 사용할 것이기 때문에 Router를 체크하여 프로젝트를 설치합니다.

프로젝트를 설치하고 http://localhost:8080/ 을 입력하면 아래와 같은 화면을 만날 수 있습니다. 

👍 router 파일 살펴보기

router 폴더에 index 파일을 한번 열어봅시다.

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    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'
      )
  }
]

위의 코드를 보면 home 화면과 about화면을 컴포넌트를 통해 각각 불러온다는 것을 알 수 있습니다. 그런데 여기서 중요한 것은 home은 최상단에 import를 하여 컴포넌트를 불렀고 about은 routes라는 옵션 안에서 component를 선언한 것을 알 수 있습니다. 

 

👍 비동기 컴포넌트(Lazy load) 이해하기

이 둘의 차이점이 바로 비동기 컴포넌트(Lazy load)를 사용할 수 있는 옵션입니다. 

처음의 화면을 다시 한번 보겠습니다. 개발자 도구에서 네트워크 옵션을 보면 모든 소스가 app.js 하나로 묶여서 컴파일되는 것을 알 수 있습니다. 처음 프로젝트를 구성하고 용량이 적은 프로젝트에서는 상관없지만 프로젝트 규모가 커지고 화면이 무거워지게 되면 하나의 js로 모든 파일을 컴파일하는 것은 성능 이슈가 발생할 수 있습니다. 

이때 각 컴포넌트별로 js 파일을 컴파일하는 옵션이 비동기 컴포넌트입니다. 

비동기 컴포넌트를 사용하기 위해선 하나의 옵션 값을 추가해 주어야 합니다.

webpackPrefetch: true

 

위의 옵션값을 추가한 후 다시 한번 화면을 보겠습니다.

 

 

app.js 하나로 묶여서 컴파일되는 것이 app.js와 about.js로 나뉘어서 컴파일 되었습니다. 아래처럼 옵션 값을 주석에 콤마(,)로 추가하면 됩니다.

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    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", webpackPrefetch: true */ '../views/AboutView.vue'
      )
  }
]

 

감사합니다