[콜럼Vue스] 지연로딩

Vue에서는 동적 import() 함수를 사용하여 컴포넌트를 지연 로딩할 수 있다.

이렇게 하면 컴포넌트가 실제로 필요할 때 로딩이 이루어지기 때문에 애플리케이션의 초기 로딩 속도가 빨라진다.

 

요약

• 지연 로딩은 컴포넌트나 리소스를 필요한 시점에 로딩하여 애플리케이션의 성능을 최적화하는 기법임.
• **동적 import()**를 통해 컴포넌트 지연 로딩을 쉽게 적용할 수 있음.
• Suspense 컴포넌트는 비동기 컴포넌트의 로딩 상태를 관리할 때 유용하며, fallback 슬롯을 통해 로딩 화면을 제공할 수 있음.

---

 

1. 동적 import()를 사용한 지연 로딩

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue') // 지연 로딩으로 컴포넌트 불러오기
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

위 코드에서 About 컴포넌트는 처음부터 불러오지 않고 해당 경로로 이동했을 때 비로소 로드됨. 즉, 초기 로딩에 포함되지 않아서 성능을 향상시킬 수 있음.

2. 컴포넌트에서 직접 적용

컴포넌트 내부에서도 동적 import()를 사용할 수 있다. 이 방법은 컴포넌트 안의 특정 컴포넌트가 필요할 때만 로드하는 방식이다.

<template>
  <div>
    <button @click="loadComponent">Show Component</button>
    <component :is="asyncComponent" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const asyncComponent = ref(null);

const loadComponent = () => {
  import('@/components/MyAsyncComponent.vue').then(comp => {
    asyncComponent.value = comp.default;
  });
};
</script>

loadComponent 메서드를 호출할 때, 컴포넌트가 동적으로 로드되어 화면에 나타남. 이 방법을 통해 불필요한 로딩을 줄이고, 성능을 최적화할 수 있음.

 

10.10.2 Suspense 컴포넌트

Vue 3에서 새롭게 추가된 Suspense 컴포넌트는 비동기 컴포넌트의 로딩 상태를 쉽게 관리할 수 있도록 도와줌. 컴포넌트가 지연 로딩되거나 비동기로 데이터를 가져오는 동안 **로딩 상태(대기 화면)**를 표시하고, 로딩이 완료되면 컴포넌트를 렌더링하는 방식으로 활용됨.

1. Suspense 기본 구조

<template>
  <Suspense>
    <template #default>
      <MyAsyncComponent />
    </template>
    <template #fallback>
      <p>Loading...</p>  <!-- 로딩 중일 때 보여줄 내용 -->
    </template>
  </Suspense>
</template>

<script>
export default {
  components: {
    MyAsyncComponent: () => import('@/components/MyAsyncComponent.vue') // 동적 import로 컴포넌트 로딩
  }
}
</script>

위 코드에서는 Suspense 컴포넌트를 사용하여 MyAsyncComponent가 로딩되는 동안 fallback 슬롯의 로딩 화면을 표시함. 컴포넌트가 완전히 로드되면, default 슬롯의 컴포넌트가 렌더링됨.

2. 비동기 데이터와 함께 사용

Suspense는 단순히 컴포넌트의 로딩 상태뿐만 아니라 비동기 데이터를 처리할 때도 사용할 수 있음. 예를 들어, API 호출로 데이터를 받아오는 동안 로딩 화면을 표시할 수 있음.

<template>
  <Suspense>
    <template #default>
      <UserProfile />
    </template>
    <template #fallback>
      <p>Loading user profile...</p>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    UserProfile: defineAsyncComponent(() =>
      import('@/components/UserProfile.vue')
    )
  }
}
</script>

위 예제는 UserProfile 컴포넌트가 로딩되는 동안 "Loading user profile..."이라는 메시지를 보여줌. 컴포넌트가 로드되면, UserProfile이 화면에 표시됨.