Vue.js는 사용자 인터페이스를 빌드하기 위한 프로그레시브 프레임워크입니다. Vue Router를 사용하면 싱글 페이지 어플리케이션을 쉽게 구축할 수 있습니다. 모든 페이지 컴포넌트를 하나의 번들로 로드하는 것은 앱의 초기 로딩 시간을 늘릴 수 있습니다. 코드 스플리팅을 사용하면 앱을 더 효율적으로 로드할 수 있습니다.

코드 스플리팅이란?

코드 스플리팅(Code Splitting)은 앱을 여러 번들로 나누는 기술입니다. 이를 통해 사용자가 앱에 처음 접속할 때 필요한 부분만 로드하여 초기 로딩 시간을 단축할 수 있습니다.

Vue Router에서 코드 스플리팅 적용하기

Vue Router에서 코드 스플리팅을 적용하려면 동적 import() 함수를 사용합니다.

다음은 코드 스플리팅이 적용된 Vue Router의 예시입니다.

const router = new VueRouter({
  routes: [
    { 
      path: '/home', 
      component: () => import('./views/Home.vue')
    },
    { 
      path: '/about', 
      component: () => import('./views/About.vue')
    },
  ]
})

위 코드에서 import() 함수는 해당 컴포넌트가 필요할 때 로드됩니다.

코드 스플리팅의 장단점

장점

• 초기 로딩 시간 단축
• 페이지 간 전환 시 부드러운 경험 제공

단점

• 추가적인 HTTP 요청이 발생할 수 있음
• 코드 복잡성 증가
• 모바일 장치와 호환성 문제

마무리

Vue Router와 코드 스플리팅을 함께 사용하면 앱의 초기 로딩 성능을 개선할 수 있습니다. 그러나 코드 스플리팅을 사용할 때는 장단점을 신중히 고려해야 합니다.

vue-router 공식 문서 code splitting with Vue Router