VueRouter의 Lazy Loading Routes 파헤치기

Lazy Loading Routes

라우트를 설정하는데 import xxx from 'xxx를 사용하여 임포트해서 사용합니다.

하지만, 이 경우 컴포넌트의 수에 따라 엄청난 지연이 발생할 수 있습니다.

 

그러면 어떻게 해결 할 수 있을까요?

 

우리는 import하는 함수를 이용하여 이를 해결할 수 있습니다.

아래 코드를 이용해서 말이죠.

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

const router = createRouter({
    //...
    routes: [
        { path: '/users/:id', component: UserDetail },
        // 위 아래 모두 같은 기능을 합니다.
        { path: '/users/:id', component: () => import('./UserDetail')},
    ]
})