vue 속도 개선 (1) - lazy loading

현재 VUE 로 클라이언트쪽을 개발해서 별도의 웹서버 없이 AWS의 정적 호스팅 기능을 사용하여 호스팅 하고 있습니다.

 

웹서버가 없으니 장점만 있고 단점은 없다고 생각하고 있었는데 문제가 발생했습니다.

 

비교하고 있는 다른 사이트 보다 초기 로딩 속도가 너무 느립니다. -_-;; 

 

아무래도 클라이언트 단에서 렌더링이나 관련 소스의 해석이 이루어지다 보니 동작속도가 클라이언트 성능에 많이 좌우되는 문제가 발생하였습니다. SERVER-SIDE-RENDERING으로 바꿀까 하다가, 우선 속도개선 작업을 먼저 진행해 보기로 하였고 첫번째로 Lazy Loading 을 적용하였습니다. 

 

1. Lazy Loading 이란?

Lazy loading 이란, 화면의 보이는 부분 또는 동작에 필요한 소스를 먼저 로드하고 다른 소스는 필요할때 로드하는 방식입니다. 이렇게 처리하면 모든것 한번에 처리하는 것 보다 당연히 성능 개선을 이룰 수 있습니다. 

https://router.vuejs.org/kr/guide/advanced/lazy-loading.html

 

 

2. Lazy Loading의 적용 범위

Vue 소스에서는 router 의 component load 부분과 각 vue file 내의 component load 부분에 적용하였습니다.

 

2.1. router 에서 적용

lazy loading 을 적용하는건 생각보다 매우 간단합니다.

import Vue from 'vue'
import Router from 'vue-router'
const paths = [
  {
    path: '',
    name: 'Home',
    component: () => import('@/components/Home.vue')
  },
  {
    path: '/board',
    name: 'Board',
    component: () => import('@/components/Board.vue')
  }
]

const router = new Router({
 mode: 'hash',
 base: 'http://www.xxx.com/',
 routes: paths
})

Vue.use(Router)

export default router

여기서 다루고자 하는 것과는 별개로 코드가 좀 지저분 하니 좀더 깔끔하게 수정해 줍니다.

// router/paths.js
export default
[
  {
    path: '',
    name: 'Home'
  },
  {
    path: '/board/:id',
    name: 'Board'
  }
]

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

function route (path) {
  return {
    path.name,
    path.path,
    component: (resovle) => import(
      `@/components/${path.name}.vue`
    ).then(resovle)
  }
}

const router = new Router({
 mode: 'hash',
 base: 'http://www.xxx.com/',
 routes: paths.map(path => route(path))
})

Vue.use(Router)

export default router

음.. 해놓고 나니 뭔가 더 늘어난것 같지만, path.js 를 분리하여 실제 동작에 필요한 logic은 건드리지 않고 path.js에 이름과 경로만 추가하면 되도록 하여 관리는 더 편하게 되었습니다.

 

2. vue 파일에 적용

vue 파일에서는 별도로 만든 child component 를 불러올때 lazy loading을 적용하였습니다.

// 변경전
<template>
  <view-main></view-main>
</template>

<script>
import ViewMain from '@/components/ViewMain'

export default {
  'view-main': ViewMain
}
</script>


// 변경후
<template>
  <view-main></view-main>
</template>

<script>
export default {
  'view-main': () => import('@/components/ViewMain')
}
</script>

파일이 적을때야 lazy loading을 적용하는게 별 차이가 없지만 양이 많아질수록 lazy loading을 적용하는게 유리합니다.