코드 스플리팅

app.js안에 모든 페이지의 정보가 들어있다.
실질적인 application에서는 화면의 갯수가 많아지고, 한 번에 로딩해오는 건 굉장한 시간이 걸린다.

코드 스플리팅의 역할

예를 들어, 30개의 페이지가 있을 경우 처음 페이지는 로그인 페이지라고 했을 때, 첫 페이지만 들고오고 나머지 29 페이지는 해당 url로 이동했을 때 들고와라 ~ 하는 게 '코드 스플리팅' 의 역할

// 코드스플리팅 전 
export default new VueRouter({
	routes: [
      {
        path: '/login',
        component: LoginPage,
      },
      {
        path: '/signup',
        component: SignupPage,
      }
    ]
})

// 코드스플리팅 후
export default new VueRouter({
	routes: [
      {
        path: '/login',
        component: () => import('@/views/LoginPage.vue'),
      },
      {
        path: '/signup',
        component: () => import('@/views/SignupPage.vue'),
      }
    ]
})

로그인과 회원가입으로 이동할 때마다 필요한 자바스크립트 파일을 그 때 그 때마다 불러오는 것이다. 웹 사이트의 홈페이지는 빠르게 로딩되어야 한다. 경로에 따라 컴포넌트 코드를 분할하여 로드하는 것이 이상적인 해결책이 될 것이다. 이러한 문제점을 직면할 수 있는 현실적인 예시로 인스타그램이나 핀터레스트를 들 수 있다.

참고
https://ui.toast.com/weekly-pick/ko_20200128