Vue.js 애플리케이션을 개발하다 보면 여러 페이지에 걸쳐 쓸데없는 자바스크립트를 로드하는 것을 피하고 싶을 때가 있습니다. 이 문제를 피하기 위한 방법 중 하나는 레이지 로딩(lazy loading)을 이용하는 것입니다. 레이지 로딩은 Vue Router를 이용하여 필요한 경우에만 컴포넌트를 로드하는 방식입니다.

Vue Router 설정

Vue Router를 이용하여 레이지 로딩을 구현하려면 import() 함수를 사용하여 동적으로 컴포넌트를 import 할 수 있습니다.

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

위 코드에서 Foo는 필요할 때만 import되는 Vue 컴포넌트를 나타내고, ./Foo.vue는 import할 컴포넌트의 경로를 나타냅니다. 그리고 나서 Vue Router를 설정하는 부분에서 다음과 같이 사용할 수 있습니다.

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

이제 Foo 컴포넌트는 /foo 경로로 이동할 때 필요할 때만 로드되는 것을 확인할 수 있습니다.

웹팩 코드 스플리팅

또 다른 방법은 웹팩의 코드 스플리팅을 이용하는 것입니다. 웹팩의 코드 스플리팅은 애플리케이션을 묶는 대신 특정 지점에서 코드를 분할하여 로딩하는 것을 가능하게 합니다. 이를 이용하면 원격지에서 컴포넌트를 chunk 단위로 로드할 수 있게 됩니다.

결론

Vue Router를 이용하여 레이지 로딩을 구현하는 것은 웹 앱의 성능을 향상시키고 사용자 경험을 개선하는 좋은 방법입니다. 코드의 일부를 필요한 시점에만 로드하여 필요한 자원을 최소화할 수 있습니다. 또한 웹팩의 코드 스플리팅을 이용하여 컴포넌트를 더 미세한 단위로 로딩할 수 있습니다.

참고 자료

• Vue Router 공식 문서
• 웹팩 코드 스플리팅 공식 문서