[Vue3] Laze Loading

SHINYEJI·2023년 11월 9일
0

Front-End

목록 보기
6/12

원래 Vue는 single page rendering이기 때문에 사이트를 들어올 때 모든 resorce를 다운받는다. 그러나 사이트가 커지고 resorce가 많이지게 되면 사용자 입장에서는 초기 로딩 속도가 느린 경험을 할 수 있다. 이를 개선하기 위해 Laze Loading이라는 성능을 최적화하는 방법이 있다.

Laze Loading은 초기 로딩 시간을 최소화하고 페이지를 필요할 때만 다운로드하여 대역폭을 절약하려는 목적으로 사용된다.

Vue에서 컴포넌트의 Laze Loading을 구현하려면 import문 대신 import()함수를 사용해야 한다.

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

import()로 지연로딩을 설정한 컴포넌트는 실제 필요할 때만 비동기적으로 로드됨으로 초기 번틀 크기를 줄이고 초기 로딩 속도를 향상키기는데 도움이 된다.

0개의 댓글

관련 채용 정보