Vue Router

Router 이해하기

라우터는 경로를 정해주는 공간으로 각 경로를 선언해주는 부분이 존재한다.
경로를 지정해줄 때는 사용할 경로 path와 경로의 이름, 경로에 연결해줄 컴포넌트로 이루어져있다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    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')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

컴포넌트를 지정해주는 방법에는 3가지가 존재한다.
상단 import를 하여 컴포넌트를 추가하는 방법과 객체 내에서 익명 함수를 통하여 import를 하는 방법이 있다.

두 방식에는 확연한 차이가 있다.

Vue Import

우리가 작성하는 .vue 파일은 컴파일 과정에서 javascript로 변환되어 index.html에 삽입된다.
프로젝트가 빌드되고 웹을 열게되면 기본적으로 app.js와 chunk-vendors.js 파일을 불러오게 된다.

chunk-vendoers.js

해당 파일은 dependency에 명시되어있는 외부 라이브러리들이 모두 해당 파일로 모이게 되어 하나로 관리가 된다.

app.js

해당 폴더에는 프로젝트 상단에 import 형식으로 선언한 모든 파일들이 들어가게 된다.

import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },

위와 같이 import HomeView from '../views/HomeView.vue'처럼 명시가 되어있으면 app.js에 전부 변환되어 내부로 들어가게 된다.

익명 함수 import

 {
    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')
  }

상단 코드 처럼 익명함수를 사용하여 import를 할 때에는 import 내부에 있는 webpackChunkName에 명시된 이름에 따라
app.js에서 분리되어서 다른 javascript파일이 만들어진다. 위 같은 경우에는 사진처럼 about.js가 표시가 된다.

webpackPrefetch

해당기능은 현재는 사용하지 않지만, 자주 사용될 확률이 높은 페이지를 미리 브라우저 캐시에 받아놓고 사용자가 호출했을 때 바로 보여줄 수 있도록 하는 기능이다.
사용방법은 위의 익명함수 import를 사용하는 방법 내부에 webpackPrefetch를 선언해주면 된다.

{
    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')
  }

위와 같이 true로 설정되면 해당 루트 페이지가 뜨는 순간 webpackPrefetch:true로 명시되어있는 컴포넌트를 미리 서버에서 받아오게 된다. 이것을 사용하면 좋은 부분은 자주 사용하지만 브라우저를 불러올 때 많은 정보를 불러와야해서 리소스를 많이 잡아먹는 페이지에 유용하게 사용할 수 있다.

정리를 하면 webpackPrefetch를 사용하지 않는 것은 자주 사용하지 않고 비교적 리소스를 적게 사용하는 페이지에 사용하고
리소스를 많이 사용하거나, 자주 사용하는 페이지는 webpackPrefetch:true를 명시하여 사용하면 좋다.