[Vue] 로딩 속도 개선

Vue Route 사용 시 등록 되는 component가 많아질수록 속도가 느려지며,

새로고침 시 화면이 잘 열리지 않는 문제가 발생 한다.

 

기존 화면 import

import Main from '@/menu/web/Main';

 

위 방식으로 등록하여 사용 시 문제가 발생 한다.

해당 문제를 해결 하기 위하여 비동기 컴포넌트를 정의 해야 한다.

const Main = () => import('@/menu/web/Main');

...


const router = new VueRouter({
   routes: [
               {
                 path: '/Main',
                 component: Main
               }
             ]
});

 

 

출처 : https://router.vuejs.org/kr/guide/advanced/lazy-loading.html

지연된 로딩 | Vue Router