Vue lazyloading과 webpack bundler

웹팩 번들러 사용시, 번들 파일을 여러 청크파일로 나눠야할 때가 있을 수 있다.

예를들면 하나의 파일 크기가 너무 큰 경우, 초기 로딩이 오래 걸리기 때문에 나눠주는 것이 좋은데,

그 경우 아래와 같은 방법으로 lazy load가 가능하다.

이렇게되면 호출 시점에 로드함으로써 기존의 높은 bundle파일의 용량을 줄어줄 수 있다는 장점이 있다.

초기에 모든 frontend 코드를 로드할지, 페이지 이동시 여러번 호출할지는 상황에 따라 결정하면된다.

const Home = () => import ("../views/Home");