2022-01-08

SPA를 개발하다보면 코드 스플리팅이라는 용어가 나온다.

첫 로딩 시 모든 페이지에 대해 싹 다 불러오는 게 아닌

그때그때마다 필요한 부분만 불러오는 것이다.

아래 코드는 실제로 회사 업무에서 적용한 Vue.js에서의 라우터 기반 코드 스플리팅이다.

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

export default new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            redirect: "/view"
        },
        {
            path: "/view",
            redirect: "/view/observation"
        },
        {
            path: "/view/observation",
            component: () => import("../components/observation/Observation")
        },
        {
            path: "/view/statistics",
            component: () => import("../components/statistics/Statistics")
        },
    ]
});

위와 같이 할 경우 각 페이지에 접속할 때에만 그 페이지의 컴포넌트를 가져오게 된다.

코드 스플리팅을 적용하지 않으면 다음과 같이 된다.

import Vue from "vue";
import VueRouter from "vue-router";

import Observation from "../components/observation/Observation";
import Statistics from "../components/statistics/Statistics";

Vue.use(VueRouter);

export default new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            redirect: "/view"
        },
        {
            path: "/view",
            redirect: "/view/observation"
        },
        {
            path: "/view/observation",
            component: Observation
        },
        {
            path: "/view/statistics",
            component: Statistics
        },
    ]
});

컴포넌트를 그냥 상단에서 미리 import 해놓고 라우팅하느냐,

컴포넌트를 import 하는 함수로 래핑해서 함수 자체를 라우팅하느냐이다.

현재 애플리케이션이 수천, 수백억(?)개의 컴포넌트를 가지고 있다면