Vue-router 지연된 로딩

지연된 로딩

번들러를 이용한 앱 제작 시, JavaScript 번들이 매우 크다면 페이지 로딩 시간에 영향을 미칠 수 있다.
각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것이다.

Vue의 비동기 컴포넌트와 Webpack의 코드 분할을 결합하여 라우트 컴포넌트를 쉽게 불러올 수 있다.

1. 비동기 컴포넌트는 Promise를 반환하는 팩토리 함수로 정의할 수 있다.
   (컴포넌트가 resolve 되어야함)

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

2. (Webpack을 사용하고 있다면) Webpack 2에서 dynamic import를 사용하여 코드 분할 포인트를 지정할 수 있다.

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

   (Babel을 사용하고 있는 경우 올바른 구문 분석을 위해 syntax-dynamic-import 플러그인을 추가해야함)

아래 소스는 위 두 가지를 결합하여 Webpack에 의해 자동으로 코드 분할될 비동기 컴포넌트를 정의하는 방법이다.

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

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

라우트 설정을 바꿀 필요 없이 Foo만 비동기 컴포넌트로 사용하면 된다.

같은 묶음으로 컴포넌트 그룹화하기

때로는 동일한 라우트 아래에 중첩된 모든 컴포넌트를 동일한 비동기 묶음으로 그룹화 할 수 있다.
이를 위해 특수 주석 문법을 사용하는 이름(Webpack 2.4 이상 지원)을 제공하여 이름을 가진 묶음을 사용해야 한다.

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