Vue router 컴포넌트 불러오기(동적, 정적)

vue-router에서 컴포넌트를 import 할 때, 정적과 동적 2가지 방법으로 import할 수 있다.

정적 import

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "static",
      component: StaticComponent
    },
  ],
});

export default router;

StaticComponent는 정적 import로, 앱이 시작할 때 모든 컴포넌트를 한 번에 불러와 로딩 시간이 길어질 수 있다.

동적 import

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "dymamic",
      component: () => import("../views/DynamicCompoent.vue"),
    },
  ],
});

export default router;

DynamicCompoent는 해당 라우트에 접근할 때만 컴포넌트를 불러와 Code Splitting을 통해 앱의 성능을 향상시킬 수 있다.

Code Splitting 이란?
웹 애플리케이션의 자바스크립트 코드를 여러 개의 작은 조각으로 분할하는 기술을 의미하며, 초기 로딩 시 사용자에게 필요한 최소한의 코드만 전달하여 페이지 로딩 속도를 향상시키고 성능을 최적화할 수 있다.

사용자가 홈페이지에 접속하면 홈페이지와 관련된 코드만 먼저 로딩되고, 다른 페이지로 이동할 때 해당 페이지의 코드가 필요한 시점에 로딩된다.

Vue Router에서도 code splitting을 지원하여, 각 라우트별로 필요한 컴포넌트를 필요한 시점에 로딩할 수 있도록 해준다.