[vuejs] router webpage 다운 로드 부분 최적화

vue js 에서  Rotuer 부분을 

 

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About
    }
  ]
});

 

위와 같이 작성 하면 아래와 같이 About.vue 에 관련된 코드가 app.js 에 포함됩니다. 그러다 보니 

웹페이지 시작 부분에서 모든 페이지를 다운 받게 됩니다.

 

 

하지만 아래와 같이 작성하면 

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]
});

 

about 이필요한 부분에서만 분리 되서 다운 받게 됩니다. 

 

 

홈페이지 소스가 너무 클때는 위와 같이 별도로 라우터에서 위와 같이 코드를 작성하여 클라이언트가 

다운로드에서 오는 부하를 줄일수 있으므로 알아 두는것이 좋다고 생각 합니다. 

 

 

해당 부분은 

아래 동영상 15분 정도에 보시면 좀더 직관적입니다. 

https://www.youtube.com/watch?v=qKSRBmoc_bI&list=PLl4Y2XuUavmtPZCKAth-Ktqtpy62vjNe3&index=11