[Vue.js] lazy-loading

 

어느샌가부터 라우터를 설정하며 component 선언을 이렇게 하고 있었다.

// router/index.js
component: () => import( "./components/Main.vue" )

 

component를 가져와서 import하는게 아니라 함수형으로 호출하는 방식이디.

캡틴판교님의 Vue.js 실무 강의에서 배우고나서부터 자연스럽게 이렇게 쓰고 있었는데 이유는 홀라당 까먹어버림..

 

그리고 돌고돌아 다시 Vue를 하게되면서 이렇게 함수형으로 컴포넌트를 가져오는 이유가 lazy-loading 때문이라는 것을 알게되었다.

 

---

◽ lazy-loading이란?

lazy-loading은 화면의 보이는 부분, 랜딩페이지 또는 동작에 필요한 소스를 먼저 로드하고 다른 소스는 필요한 시점에 로드하는 방식으로 성능을 개선시키는 방법 중 하나이다.

 

◽ lazy-loading 사용

// 기존 방식
import Main from '@/views/Main'
{
    path: '/',
    component: Main
}

// lazy-loading
{
    path: '/',
    component: () => import( "./components/Main.vue" )
}

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.