prefetch
-
[VueJS] Lazy Load (비동기 컴포넌트) 구성 방법Study/VueJS 2022. 5. 30. 10:46
Lazy load VueJS같은 프론트엔드 프레임워크는 처음에 프로젝트와 관련된 현재 보고 있는 화면과 무관한 것들까지 모든 리소스를 한번에 다운받는다. 프로젝트가 크면 리소스 다운받는 시간이 늘어나게 된다. Lazy load는 리소스를 컴포넌트 단위로 분리시켜주고, 컴포넌트 혹은 라우터 단위로 필요한 것들만 다운받을 수 있도록 한다. 장점 소스코드가 업데이트되었을 경우, 분산되어 있지 않다면 js를 다시 다운받아야 하지만 분산되어 있다면 관련 파일만 변경하여 다운받게 된다. 설정 index.js import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes..