[Vue3] lazy-loading을 활용한 성능개선

lazy-loading이란?

앱의 초기 구동시 모든 컴포넌트의 리소스를 가져오지 않고, 리소스를 컴포넌트 단위로 분리시켜 필요한 것들만 다운로드합니다.

특히 대규모 프로젝트에서 사용하는 컴포넌트가 많아질수록 로드하는 시간이 길어지는데 이를 줄이는데 유용합니다.

사용 방법

router.js에서 component import 하는 부분을 함수로 변경합니다.

const routes = [
	{
	path: '/page/home/detail',
	name: 'DetailPage',
	meta: { menuAth: 'menu0001' },
	component: () => import('../page/home/homeDetail.vue'), //함수화
	}
]

export default routes

주의점

app.vue 또는 home.vue와 같은 랜딩페이지는 lazy-loading 할 수 없습니다.