Dynamic Import

Dynamic Import

정적 import를 통해 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어진다.

이러한 문제점을 보완하기 위해 ES6에서 필요한 스크립트를 필요한 시점에 가져와서 사용하도록

Dynamic Import를 정의했다.

 

() => import('./components');

 

예) vue router 설정할때의 예

import SearchLayout from '@/layout/search_index.vue'

const SearchRouter = {
   path: '/search',
   name: 'Search',
   hidden: true,
   redirect: '/search/searchList',
   component: SearchLayout,
   meta: {
     title: '통합 검색',
     icon: 'el-icon-search'
   },
   children: [
     {
       path: 'searchList',
       component: () => import('@/views/menu/search/searchList.vue'),
       name: 'search_list',
       meta: {
         title: '통합 검색'
       },
     }
   ]
}

export default SearchRouter

위와 같이 해당하는 url로 이동할때 필요한 모듈만 불러 사용한다.