webpack code split

웹팩으로 번들링하게 되면 파일이 꽤 커진다. 그런 부분을 부분을 분리하는 것이 split이다.
require.ensure방법도 있지만 자주 쓰이지 않는다.

import(/ webpackChunkName: 'name' / '경로')를 이용해서 처리할 수도 있다.

요약하자면 모든 것이 하나로 호출 되는데 이렇게 하면 분리해서 호출할 수 있다.
생김새가 이상하긴 한데 정상인거 맞다.

vue router를 사용한다면 이 글이 유용하다.
https://css-tricks.com/lazy-load-routes-in-vue-with-webpack-dynamic-comments/

사용 안하는 형태
{
	path: '/',
    name: 'Home',
    component: Home
}

다이나믹 임포트 사용
{
	component: () => import(/* webpackChunkName: 'home' */ ' './Home.vue');
}

청크 이름을 자동으로 주는 방법
{
	component: () => import(/* webpackChunkName: '[request]' */ ' './Home.vue');
}