코드 스플리팅을 이용한 Lazy loading

개요

• /src/routes/index.js에 라우터 설정을 한다.
  • component 속성에서 *.vue를 연결한다.
• 이렇게 라우터 설정을 하면 초반에 라우터에 설정된 모든 페이지(보여지지 않을 페이지 까지)를 가져오므로 성능에 문제가 생긴다.
• 실제 라우터 path의 호출이 발생할 때 import를 통해서 자원을 호출한다면 효율적이다.
  • Lazy Loading

코드

• component: () => import('경로')

/* file: /src/routes/index.js */

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

export default new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/login",
    },
    {
      path: "/login",
      component: () => import("@/views/LoginPage.vue"),
    },
    {
      path: "/signup",
      component: () => import("@/views/SignupPage.vue"),
    },
    {
      path: "/main",
      component: () => import("@/views/MainPage.vue"),
    },
    {
      path: "/add",
      component: () => import("@/views/PostAddPage.vue"),
    },
    {
      path: "*",
      component: () => import("@/views/NotFoundPage.vue"),
    },
  ],
});