Vue.js - 코드 분할(Code Splitting)

코드를 분할하여 사용자가 원하는 시점에 파일을 로딩하여 애플리케이션 초기 로딩 속도를 개선하는 방법

사용 예제 : 라우터의 코드 분할

before

import LoginPage from '@/views/LoginPage.vue';  
import SingupPage from '@/views/SingupPage.vue';
import LogoutPage from '@/views/LogoutPage.vue';

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: LoginPage,
    },
    {
      path: '/signup',
      component: SingupPage,
    },
  ],
});

• import로 불러온 LoginPage, SingupPage를 component에 바인딩
• LogoutPage는 불러오긴 했지만 사용되지 X => 로딩 속도 측면에서 비효율적

after

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

• 따로 import 시키지 않고 component에서 화살표 함수를 이용해 직접 import
• 이렇게 원하는 시점에 불러온다면 사용할 것만 불러오기 때문에 로딩 속도 측면에서 효율적으로 관리할 수 있다 .