[javascript] Vue Router의 라우트 이동 속도 비교

18 Dec 2023

javascript

Vue.js는 밋밋한 single-page application(SPA)을 만들기 위해 가장 인기 있는 방법 중 하나로 Vue Router를 사용합니다. 이러한 SPA의 주요 장점 중 하나는 빠른 페이지 이동 속도입니다. 그러나 실제로 Vue Router의 라우트 이동 속도가 얼마나 빠른지 비교해보겠습니다.

1. 초기 렌더링 시

Vue Router의 초기 렌더링 속도는 애플리케이션의 규모에 따라 다를 수 있습니다. 작은 규모의 애플리케이션에서는 거의 눈에 띄지 않지만, 대규모 애플리케이션에서는 초기 렌더링에 시간이 소요될 수 있습니다.

2. 동적 라우트 로딩 시

Vue Router는 동적 라우트 로딩을 지원하여 페이지가 렌더링되기 전에 필요한 자원을 미리 로드할 수 있습니다. 이것은 페이지 이동 속도를 향상시키는 데 도움이 됩니다.

예시 코드

const router = new VueRouter({
  routes: [
    {
      path: '/dynamic',
      component: () => import('./DynamicComponent.vue')
    }
  ]
})

3. Lazy Loading

Vue Router는 레이지 로딩을 지원하여 필요한 컴포넌트만 로드할 수 있습니다. 이를 통해 초기 페이지 로딩 시간을 단축시킬 수 있습니다.

결론

Vue Router는 초기 렌더링, 동적 라우트 로딩, 그리고 레이지 로딩 등을 통해 빠른 페이지 이동 속도를 제공합니다. 그러나 애플리케이션의 규모와 구조에 따라 성능은 달라질 수 있으므로 실제 사용 시에는 주의가 필요합니다.

이어지는 포스트에서는 Vue Router의 성능을 향상시키는 다양한 방법에 대해 살펴보겠습니다.

참고 자료: