싱글 페이지 애플리케이션(SPA)에서 성능 최적화: 지연 로딩(Lazy Loading) 활용하기

싱글 페이지 애플리케이션(SPA)에서 성능 최적화: 지연 로딩(Lazy Loading) 활용하기

싱글 페이지 애플리케이션(SPA)은 한 번에 필요한 리소스를 모두 다운로드하여 자연스러운 페이지 전환을 제공하는 것이 특징입니다. 하지만 프로젝트 규모가 커질수록 다운로드 시간도 길어져 성능 저하를 초래할 수 있습니다. 대표적인 SPA 프레임워크인 Angular, React, Vue에서는 이러한 문제를 해결하기 위해 **지연 로딩(Lazy Loading)**을 활용합니다.

지연 로딩(Lazy Loading)이란?

지연 로딩은 사용자가 특정 페이지에 진입할 때 필요한 리소스를 그때그때 불러오는 방식입니다. 이를 통해 초기 로딩 시간을 줄이고, 사용자 경험을 개선할 수 있습니다.

Vue Router에서 Lazy Loading 적용하기

1. Lazy Loading 적용 전

일반적으로 컴포넌트를 미리 import하여 라우터에 등록하게 되면, 해당 페이지에 진입하지 않더라도 모든 컴포넌트가 한꺼번에 로드됩니다.

import MainPage from './components/MainPage.vue'
import InfoPage from './components/InfoPage.vue' 
import PurchasePage from './components/PurchasePage.vue' 
const router = new VueRouter(
{ routes: [ 
{ path: '/main', component: MainPage },
{ path: '/info', component: InfoPage },
{ path: '/purchase', component: PurchasePage }
] 
})​

작은 규모의 프로젝트에서는 큰 문제가 되지 않을 수 있지만, 프로젝트가 커지면 성능 문제가 발생할 수 있습니다.

2. Lazy Loading 적용 후

아래처럼 Lazy Loading을 적용하면, 각 페이지에 진입할 때만 필요한 리소스를 다운로드하게 됩니다.

const router = new VueRouter({
routes: [ { path: '/main', component: () => import('./components/MainPage.vue') },
{ path: '/info', component: () => import('./components/InfoPage.vue') },
\{ path: '/purchase', component: () => import('./components/PurchasePage.vue') }
] })

이 방식은 특히 대규모 프로젝트에서 초기 로딩 시간을 줄이고, 필요한 순간에만 리소스를 불러와 성능을 최적화할 수 있습니다.

동일한 Chunk로 컴포넌트 그룹핑하기

프로젝트에서 여러 컴포넌트를 비슷한 시점에 로드해야 할 경우, 이를 Chunk로 묶어 그룹핑할 수 있습니다. 예를 들어, 아래 코드는 여러 페이지를 하나의 Chunk로 묶어 성능을 더욱 향상시킵니다.

라우터 설정 예시

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [ { path: '/', name: 'Home', component: Home },
{ path: '/one', name: 'One',
component: () => import(/* webpackChunkName: "group-num" */ '../views/One.vue') },
{ path: '/two', name: 'Two',
component: () => import(/* webpackChunkName: "group-num" */ '../views/Two.vue') },
{ path: '/three', name: 'Three', 
component: () => import(/* webpackChunkName: "group-num" */ '../views/Three.vue') }
] const router = createRouter({ history: createWebHistory(process.env.BASE_URL),
routes }) export default router

 

이와 같이 "group-num"이라는 동일한 Chunk로 묶어두면, 해당 Chunk가 한 번만 로드되고 그 이후에는 추가적인 로딩 없이 컴포넌트를 사용할 수 있습니다.

결론

Lazy Loading과 Chunk 그룹핑을 통해 SPA의 성능을 최적화할 수 있습니다. 특히 대규모 프로젝트에서 초기 로딩 시간을 줄이고, 사용자가 실제로 필요한 리소스만 불러올 수 있게 함으로써 사용자 경험을 크게 개선할 수 있습니다.