사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 라우팅이라고 한다

• 라우팅에 대한 이해
• vue-router
• prefetch
• 컴포넌트의 로딩 시점

4.1 라우팅이란?

Vue와 같은 SPA는 페이지를 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아닌, 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해 화면을 갱신한다

💡 라우팅: 클라이언트에서 url 주소에 따라 페이지가 전환되는 것

Vue 내부에선 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결한다

Vue에선 공식 플러그인인 vue-router를 이용한다

4.2 Vue-Router 설치

vue add router

vue-router가 설치되면서 자동으로 파일이나 폴더가 추가된다

src/App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

router-link to=”주소” : 클릭 시 해당 주소로 이동

src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const 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"),
  },
];

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

export default router;

routes : 라우트 배열

‘path’ : 브라우저에서 접속하는 url 주소 정의

‘component’ : 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트

// route level code-splitting : Home 컴포넌트와 About 컴포넌트의 component 속성이 다른데, Home은 사용자가 해당 path에 접근하지 않더라도 이미 vue 파일을 import 하는 것이고 About은 path에 접근하기 전까지는 vue 파일에 대한 import가 일어나지 않는다(lazy-loading)

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

router는 main.js에 등록해 사용한다

4.3 Lazy Load 적용하기(비동기 컴포넌트)

Vue CLI를 통해 빌드하면 소스 코드가 하나의 파일로 합쳐지는데, 파일 용량이 매우 커진다

페이지가 한번 로드되고 나면 페이지 전환이 빠르나, 초기 랜더링 시간이 오래 걸린다

Lazy Load는 리소스를 컴포넌트 단위로 분리하여 컴포넌트or라우터 단위로 필요한 것들만 그때 그때 다운받을 수 있게 하는 방법이다

Vue의 Lazy Load 사용 시 주의할 점

라우터의 Lazy Load로 컴포넌트를 import 한 것은 내부적으로 Vue CLI의 prefetch 기능이 사용된 것이다

💡 prefetch : 미래에 사용될 수 있는 리소스(About과 같은 비동기 컴포넌트)를 캐시에 저장해 사용자 접속 시 빠르게 리소스를 내려준다

굉장히 유용한 기능이지만, 모든 비동기 컴포넌트를 당장 사용하지 않더라도 캐시에 담는 비용이 발생한다

별도로 분리된 chunk 파일 각각에 대한 request + 캐싱 의 비용이 발생해 초기 랜더링 시간 단축 이라는 prefetch의 순기능을 잃게 된다

Vue CLI에서 prefetch 기능은 true가 기본값으로 설정되어있기 때문에 정말 필요한 컴포넌트에 대해서 prefetch 기능을 적용하는 것이 중요하다

prefetch 기능 끄기

Vue.config.js 파일을 생성하고 아래 코드를 추가한다

module.exports = {
  chainWebpack: (config) => {
    config.plugins.delete("prefetch");
  },
};

prefetch 기능을 삭제해도 Lazy Load로 비동기 컴포넌트를 사용할 수 있다

import(/* webpackChunkName: "about" */ "../views/About.vue"),

컴포넌트 import 시 위와 같이 /* webpackChunkName: "about" */ 주석을 넣어주면 해당 컴포넌트에 대해선 prefetch가 적용된다

Vue 애플리케이션 개발 시 기본적으로 prefetch 기능은 끄는 것을 권장한다

애플리케이션 리소스 다운로드 시점 분리

사용자가 접속할 가능성이 높은 컴포넌트 : 한 번에 다운로드 할 수 있게 설정

사용자의 접속 빈도가 낮은 컴포넌트 : prefetch 또는 사용자 접속 시점에 리소스를 다운받게 설정

---

출처: 고승원 저, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭(2021)

---