📚 Reference

• 공식 문서 1
• 참고 자료 1

📜 Chapter

Frontend 성능 최적화

성능 최적화 - Vue.js

‣

Async Component

• Async Component
• defineAsyncComponent
• 대규모 애플리케이션에서는 앱을 더 작은 청크로 나누고 필요할 때만 서버에서 구성 요소를 로드해야 할 수도 있다. 이를 가능하게 하기 위해 Vue에는 defineAsyncComponent 함수가 있다.

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
})
// ... use `AsyncComp` like a normal component

• 보시다시피 defineAsyncComponent는 Promise를 반환하는 로더 함수를 허용한다.
• 서버에서 구성 요소 정의를 검색하면 Promise의 resolve 콜백을 호출해야 한다.
• 또한 reject(reason)을 호출하여 로드가 실패했음을 나타낼 수 있다.
• ES module dynamic import도 Promise를 반환하므로 대부분 defineAsyncComponent와 함께 사용한다.
• Vite 및 webpack과 같은 번들러도 구문을 지원하므로(번들 분할 지점으로 사용함) Vue SFC를 가져오는 데 사용할 수 있다.

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

• 결과 AsyncComp는 실제로 페이지에 렌더링될 때만 로더 함수를 호출하는 래퍼 구성 요소이다.
• 또한 모든 props와 슬롯을 내부 구성 요소에 전달하므로 비동기 래퍼를 사용하여 지연 로딩을 달성하는 동시에 원래 구성 요소를 원활하게 대체할 수 있다.
• 일반 구성 요소와 마찬가지로 비동기 구성 요소는 app.component()를 사용하여 전역적으로 등록할 수 있다.

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

• 부모 구성 요소 내부에서 직접 정의할 수도 있다.