# 경로 지연 로딩

번들러를 사용하여 앱을 빌드하면 JavaScript 번들이 상당히 커져 페이지 로드 시간에 영향을 미칠 수 있습니다. 각 경로의 컴포넌트를 별도의 청크로 분할하고 경로를 방문 할 때 만 로드 할 수 있다면 더 효율적일 것입니다.

Vue Router는 기본적으로 동적 임포트(Dynamic import) 지원하므로 정적 임포트(Static Import)를 동적 임포트(Dynamic import)로 바꿀 수 있습니다.

// replace
// import UserDetails from './views/UserDetails'
// with
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

component (및 components ) 옵션은 컴포넌트의 약속을 반환하는 함수를 허용하며 Vue Router 는 처음 페이지에 들어갈 때만 가져온 다음 캐시 된 버전을 사용합니다. 즉, Promise를 반환하는 한 더 복잡한 함수를 가질 수도 있습니다.

const UserDetails = () =>
  Promise.resolve({
    /* component definition */
  })

일반적으로 모든 경로에 대해 항상 동적 임포트(Dynamic import) 를 사용하는 것이 좋습니다.

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')