Vue 3의 레이지 로딩 컴포넌트

웹 애플리케이션을 만들 때 빠른 로딩 속도는 필수입니다. 몇 초만 더 있으면 사이트를 방문하는 사용자 수에 큰 영향을 미칠 수 있습니다. 이것은 빠른 사이트를 갖는 것이 Google 검색 엔진에서 좋은 순위를 매기는 것뿐만 아니라 사용자가 귀하의 웹페이지와 상호 작용하도록 하는 데 중요하다는 것을 의미합니다.

Vue 3는 비동기 구성 요소 API 및 새로운 Suspense 구성 요소의 개선을 통해 이를 쉽게 달성할 수 있도록 몇 가지 새로운 기능을 도입했습니다. 이 기사에서는 페이지 로드 시간을 단축하기 위해 Vue 3에서 지연 로드 구성 요소를 사용하는 방법을 살펴보겠습니다.


이 기사가 작성된 YouTube 비디오를 확인하십시오.




이 예제 앱에는 사용자가 인증된 경우에만 Vue 로고의 대화형 그래픽을 표시하는 구성 요소SecretImage가 있습니다. 침입자가 가장 귀중한 자산을 보지 못하도록 이 구성 요소의 가시성을 전환하는 버튼을 추가했습니다.

<template>
  <!-- ... -->
  <!-- Large component that uses many libraries -->
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import SecretImage from './components/SecretImage.vue'

export default {
  components: { SecretImage }
  // ...
}
</script>

SecretImage를 빌드하는 동안 많은 복잡한 라이브러리를 사용하여 javascript 코드의 양이 증가했습니다. 앱을 빌드하면 사이트에 대한 초기 요청 시 로드되는 대규모 공급업체 파일이 생성되는 것을 볼 수 있습니다.

비동기 구성 요소

Vue 3과 함께 제공되는 새로운defineAsynComponent 함수를 사용할 수 있습니다. 컴포넌트를 로드하는 함수를 전달하기만 하면 됩니다. Vue는 webpack과 함께 미리 구성되어 있으므로 동적 가져오기 기능을 사용할 수 있습니다.

<template>
  <!-- ... -->
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import { defineAsyncComponent } from 'vue'
const SecretImage = defineAsyncComponent(() =>
  import('./components/SecretImage.vue')
)

export default {
  components: { SecretImage }
  // ...
}
</script>

이제 앱을 빌드하면 새 파일이 생성되고 공급업체 파일이 크게 줄어드는 것을 볼 수 있습니다.



다시 로그인하면 SecertImage 구성 요소를 로드하기 위해 생성되는 새 요청도 볼 수 있습니다.

나중에 이 구성 요소를 로드하므로 UI의 지연 로드 부분이 요청되고 렌더링되는 동안 짧은 지연이 있을 수 있습니다. 구성 요소가 로드되는 동안 표시될 로드 구성 요소 속성을 추가로 전달할 수 있습니다.

import { defineAsyncComponent } from 'vue'
import Loading from './components/Loading.vue'

const SecretImage = defineAsyncComponent({
  loader: () => import('./components/SecretImage.vue'),
  loadingComponent: Loading
})

그러나 이 접근 방식을 사용하면 소품이나 슬롯을 로드 구성 요소에 전달하기 어렵기 때문에 제한적일 수 있습니다.

미결

유연성을 더하기 위해 템플릿의 구성 요소로 컨텐츠를 비동기식으로 로드할 수 있는 새로운Suspense 구성 요소를 사용할 수 있습니다. 우리가 해야 할 일은 Suspense 구성 요소를 호출하고 기본 및 대체 슬롯에 대한 구성 요소를 전달하는 것입니다.

<template>
  <!-- ... -->
  <Suspense v-if="isLoggedIn">
    <template #default>
       <SecretImage />
    </template>
    <template #fallback>
       <Loading />
    </template> 
  </Suspense>
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import { defineAsyncComponent } from 'vue'
import Loading from './components/Loading.vue'

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

export default {
  components: { SecretImage, Loading  }
  // ...
}
</script>

비동기 콘텐츠가 로드되면 기본 슬롯이 표시되고 상태가 로드되는 동안 대체 슬롯이 표시됩니다.


읽어 주셔서 감사합니다! 내 게시물이 마음에 들면 나를 팔로우하고 내 YouTube 채널을 구독하는 것을 잊지 마십시오!