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 하는 함수로 래핑해서 함수 자체를 라우팅하느냐이다.
현재 애플리케이션이 수천, 수백억(?)개의 컴포넌트를 가지고 있다면