Vue.js webpack

routes를 사용 할 때 첫번째 메뉴는

  {
    path: '/',
    name: 'home',
    component: HomeView
  },

위처럼 작성한다. app.js로 들어오는 개념

그 다음 메뉴를 만들 때는

  {
    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/AboutView.vue'
    )
  }

이거나

  {
    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", webpackPrefetch:true */ 
      '../views/AboutView.vue'
    )
  }

로 구성하게 되는데

위코드에서 다른점은 webpackPrefetch:true의 유무인데

webpackPrefetch:true를 넣게 된다면 그 페이지를 사용자의 쿠키에 저장하여 바로바로 쿠키에서 불러오게 한다.

만약 사용자가 자주 들어오는 페이지이거나 페이지의 크기가 너무 큰 경우에는 webpackPrefetch:true를 넣어 라우터를 구성한다.