[vue-router] Lazy Loading Routes

번들러를 사용하여 앱을 빌드할 때, JavaScript 번들이 커지게 되면 페이지 로드하는데 걸리는 시간이 길어지게 됩니다. 각각 라우트 컴포넌트 단위로 나누고 그 라우트에 방문하게 될 때 파일을 로드하는 것이 더 효율적입니다.

1. Vue의 비동기 컴포넌트 + Webpack의 코드 분할

Vue의 비동기 컴포넌트([Vue.JS] 컴포넌트 (고급:Dynamic & Async Components) 참고)와 Webpack의 코드 분할(Code Splitting 참고)을 결합하여 Lazy Loading Route를 쉽게 구현 할 수 있습니다.

Vue의 비동기 컴포넌트

비동기 컴포넌트는 Promise를 반환하는 팩터리 함수를 이용하여 만들 수 있씁니다. 컴포넌트 정의는 resolve 함수의 인자로 전달 되어야 합니다.

const Foo = () => Promise.resolve({ /* 컴포넌트 정의 */ })

Webpack의 코드 분할

Webpack 2의 Dynamic Import를 사용하여 코드를 분할 할 수 있습니다. (Lazy Loading Route는 비동기 컴포넌트를 사용하기 때문에 Promise를 반환하는 Dynamic Import를 사용해야 합니다.)

import('./Foo.vue') // returns a Promise

위의 문법을 사용하기 위해서는, Babel을 사용하고 있는 경우에는 syntax-dynamic-import 플러그인을 추가해야 올바른 구문 분석을 할 수 있습니다.

Vue의 비동기 컴포넌트 + Webpack의 코드 분할

위의 두가지 방법을 결합하여 Webpack에 의해 자동으로 코드를 분할하는 비동기 컴포넌트를 정의 할 수 있습니다.

const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

라우트 설정은 아무것도 바꿀 필요가 없습니다. 위에서 이야기 한 방법으로 Lazy loading Route를 구현 할 수 있습니다.

2. 같은 Chunk로 컴포넌트 묶기

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

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

이렇게 하면, Webpack은 동일한 Chunk 이름을 가지는 비동기 모듈을 동일한 Chunk로 그룹화 합니다.

참고

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