Vue Lazy load 적용하기

 

 이번 시간에는 Vue Router 설정 중 Lazy Loading Routes를 사용하는 실습을 진행하겠습니다. 해당 실습은 vuejs 가이드 문서를 참고해서 만들었습니다.

만약 Lazy Load에 대한 개념이 어렵다면 이전 게시물인 Vue Lazy Load(비동기 컴포넌트)란? 에 대한 포스팅을 읽고 오시는 것을 추천합니다.

1. Vue 기본 CLI 세팅

1-1. Vue CLI 설치

아래는 vue cli를 설치하는 명령어입니다.

$ npm install -g @vue/cli

 

 

1-2. Default 옵션으로 프로젝트 설치하기

해당 옵션으로 프로젝트를 생성하는 경우 기본적으로 설정된 값으로 설치가 됩니다.

1-2-1. vue 프로젝트 생성

vue create [프로젝트 명] 명령어를 실행합니다. 여기서 프로젝트 명은 'vue-lazy-load '입니다.

$ vue create vue-lazy-load

아래 그림과 같이 Default (Vue 3) 옵션을 선택해 줍니다.

1-2-2. vue router 설치

아래 명령어로 vue 라우터 플러그인을 설치해 줍니다.

$ cd vue-lazy-load
$ vue add router

history mode는 URL의 해쉬 값 제거 속성으로 사용 여부 y(사용)를 사용하는 경우 url 경로가 #이 아닌 / 로 변경됩니다.

1-2-3. vue 프로젝트 실행

해당 프로젝트로 이동 후, npm run serve 명령어로 프로젝트를 실행해 줍니다.

$ npm run serve

http://localhost:8080/ 에 접속을 하여 아래 그림과 같이 웹 사이트 결과를 확인해줍니다.

---

2. lazy-loaded 사용 안 하는 경우 

/src/router/index.js 파일에 아래와 같이 작성합니다. about 부분을 아래와 같이 변경합니다.

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

오른쪽 마우스 검사 - network를 통해보면 About 페이지를 이동해도 app.js만 보이고 있습니다.

이는 SPA(싱글 페이지 애플리케이션)이 적용된 것을 확인할 수 있습니다.

---

3. lazy-loaded 사용한 경우 

/src/router/index.js 파일에 아래와 같이 작성합니다. about 부분을 아래와 같이 변경합니다.

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    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/About.vue')
  }

아래 사진을 보면 Home 메뉴에서는 app.js를 요청하고, About 메뉴 클릭 시, about.js를 요청합니다. lazy-load가 적용되었습니다. 

---

4. 동일한 Chunk로 컴포넌트 그룹핑하기

동일한 라우트에 사용되는 모든 컴포넌트를 하나의 비동기 Chunk로 묶을 수 있습니다. 이를 위해 특별한 주석 문법을 사용하고, Chunk 이름만 주석에 제공해 주면 됩니다. 특별한 주석은 예를 들면 /* webpackChunkName: "num" */ 를 의미합니다.

4-1. vue-lazy-load/src/App.vue 수정

여러 메뉴를 생성해줍니다.

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/one">One</router-link> |
    <router-link to="/two">Two</router-link> |
    <router-link to="/three">Three</router-link>
  </div>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

4-2. views 폴더에 컴포넌트 생성

• One.vue

<template>
  <div class="one">
    <h1>This is an one page</h1>
  </div>
</template>

• Two.vue

<template>
  <div class="two">
    <h1>This is an two page</h1>
  </div>
</template>

• Three.vue

<template>
  <div class="three">
    <h1>This is an three page</h1>
  </div>
</template>

4-3. /src/router/index.js 파일 수정

one, two, three를 라우터에 추가해줍니다. 해당 라우터는 특별한 주석을 /* webpackChunkName: "num" */ 로 동일하게 하여 그룹핑해 줍니다.

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    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/About.vue')
  },
  {
    path: '/one',
    name: 'One',
    component: () => import(/* webpackChunkName: "num" */ '../views/One.vue')
  },
  {
    path: '/two',
    name: 'Two',
    component: () => import(/* webpackChunkName: "num" */ '../views/Two.vue')
  },
  {
    path: '/three',
    name: 'Three',
    component: () => import(/* webpackChunkName: "num" */ '../views/Three.vue')
  }

]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4-4. 결과

아래와 같이 Home 메뉴는 app.js 호출하고, About 메뉴 클릭 시 about.js 호출합니다. 여기서 자세히 봐야 할 부분은 그룹핑된 One, Two, Three 메뉴입니다. 이는 One에서 num.js 호출하고 그 뒤로는 호출하지 않는 것을 확인할 수 있습니다.

 

이번 시간에는 Vue Lazy load 사용 안 한 경우, Vue Lazy load 사용한 경우를 비교하고 동일한 chunk로 컴포넌트 그룹핑을 해보았습니다.