원래 Vue는 single page rendering이기 때문에 사이트를 들어올 때 모든 resorce를 다운받는다. 그러나 사이트가 커지고 resorce가 많이지게 되면 사용자 입장에서는 초기 로딩 속도가 느린 경험을 할 수 있다. 이를 개선하기 위해 Laze Loading이라는 성능을 최적화하는 방법이 있다.
Laze Loading은 초기 로딩 시간을 최소화하고 페이지를 필요할 때만 다운로드하여 대역폭을 절약하려는 목적으로 사용된다.
Vue에서 컴포넌트의 Laze Loading을 구현하려면 import
문 대신 import()
함수를 사용해야 한다.
const Foo = () => import('./Foo.vue')
import()
로 지연로딩을 설정한 컴포넌트는 실제 필요할 때만 비동기적으로 로드됨으로 초기 번틀 크기를 줄이고 초기 로딩 속도를 향상키기는데 도움이 된다.