더 나은 성능을 위해 VUE의 Lazy Load 구성 요소를 사용하는 방법

1. 동적 가져 오기를 감싸서 VUE 3에서 게으른 로딩이 아닌 부품 구성 요소에 정의를 사용하여 초기 번들 크기를 줄이고로드 시간을 향상시킵니다. 2. Vue 라우터에서 Vue 라우터가 기본적으로 비동기 구성 요소를 처리하므로 탐색 할 때만로드하여 경로 구성 요소에 동적 가져 오기를 직접 적용하십시오. 3. 지연 및 타임 아웃 설정을 포함하여 정의 성분의 옵션으로 로딩 및 오류 상태를 추가하여 사용자 경험을 향상시킵니다. 4. / webpackchunkName과 같은 웹 팩 마법의 주석을 사용하여 관련 구성 요소를 공유 청크로 그룹화하여 추가 최적화 : "이름" / HTTP 요청을 최소화합니다. 게으른 하중은 경로 수준 구성 요소, 무거운 또는 드물게 사용되는 UI 요소 및 조건부 구성 요소에 이상적이지만 HTTP 오버 헤드로 인해 작은 구성 요소에 대해서는 과도하지 않아야합니다. Lazy-Loaded 구성 요소는 SSR에 영향을 미치는 초기 HTML에 포함되지 않으며 Vite 및 Webpack과 같은 빌드 도구는 동적 가져 오기로 코드 분할을 자동으로 처리합니다.

VUE의 게으른로드 구성 요소는 코드를 분할하고 필요할 때만 구성 요소를로드하여 앱의 성능을 향상시키는 간단하고 효과적인 방법입니다. 이렇게하면 초기 번들 크기가 줄어들고 페이지로드 시간 속도를 높입니다.

올바르게 수행하는 방법은 다음과 같습니다.

1. defineAsyncComponent 사용하여 동적 가져 오기를 사용하십시오

VUE 3에서, 게으른로드하는 권장 방법은 구성 요소가 defineAsyncComponent 사용하고 있습니다. 동적 가져 오기를 감싸고 구성 요소를 비동기 구성 요소로 바꿉니다.

 'vue'에서 {defineasynccomponent} 가져 오기

Const AsyncuserProfile = defineasynccomponent (() =>
  가져 오기 ( './ 구성 요소/userprofile.vue')
))

그런 다음 일반 구성 요소처럼 템플릿에서 AsyncUserProfile 사용할 수 있습니다.

 <emplate>
  <div>
    <UserProfile v-if = "showprofile" />
  </div>
</템플릿>

<스크립트 설정>
&#39;vue&#39;에서 {defineasynccomponent} 가져 오기

const userprofile = defineasynccomponent (() =>
  가져 오기 ( &#39;./ 구성 요소/userprofile.vue&#39;)
))
</스크립트>

즉, UserProfile.vue showProfile true 될 때만로드됩니다.

2. Vue 라우터의 게으른 부하

게으른 하중의 가장 일반적이고 영향력있는 용도 중 하나는 VUE 라우터입니다. 모든 경로 구성 요소를 선불로 가져 오는 대신 주문시로드하십시오.

 const 경로 = [
  {
    경로 : '/대시 보드',
    구성 요소 : () => import ( './ views/dashboard.vue')
  },
  {
    경로 : '/프로필',
    구성 요소 : () => import ( './ views/profile.vue')
  }
]]

참고 : 여기에서 defineAsyncComponent 필요하지 않습니다. Vue 라우터는 동적 가져 오기를 사용할 때 비동기 구성 요소를 자동으로 처리합니다.

이렇게하면 각보기가 사용자가 해당 경로로 탐색 할 때만로드되도록합니다.

3. 오류 처리 및 로딩 상태를 추가하십시오

게으른로드는 훌륭하지만 네트워크 요청은 실패하거나 시간이 걸릴 수 있습니다. 로딩 및 오류 구성 요소를 추가하여 사용자 경험을 향상시킬 수 있습니다.

 const asynccomponent = defineasynccomponent ({
  로더 : () => import ( './ components/HeavyComponent.vue'),
  LoadingComponent : Loadingspinner,
  ErrorComponent : ErrorFallback,
  지연 : 200, // 200ms 후로드를 표시합니다
  시간 초과 : 5000 // 5 초 후에 실패합니다
})

이렇게하면 비동기 부하 동안 UX를 완전히 제어 할 수 있습니다.

4. 공유 청크로의 그룹 구성 요소 (고급)

때로는 관련 구성 요소가 함께로드되기를 원합니다. WebPack은 마법의 주석을 사용하여 청크 이름을 지정할 수 있습니다.

 const reportwidget = defineasynccomponent (() =>
  import (/ * WebPackChunkName : "Report-Components" */'./components/reportwidget.vue ")
))

이를 통해 Webpack은 동일한 청크 이름을 단일 파일로 그룹화하여 여러 관련 구성 요소를 사용할 때 HTTP 오버 헤드를 줄입니다.

게으른 하중을 사용하는시기

• 경로 수준 구성 요소 (거의 항상)
• 무겁거나 드물게 사용되는 UI 구성 요소 (모달, 관리자 패널, 복잡한 차트)
• 사용자 흐름에서 늦게 나타나는 조건부 구성 요소

명심해야 할 것들

• 과도하게 사용하지 마십시오. 작은 구성 요소는 추가 HTTP 요청의 오버 헤드 가치가 없습니다.
• 초기 HTML (SSR 고려 사항)에서는 게으른로드 구성 요소를 상환 할 수 없습니다.
• 동적 가져 오기로 Vite 및 Webpack 핸들 코드와 같은 도구를 자동으로 분할하십시오.

기본적으로 VUE의 게으른 적재는 간단하고 강력합니다. 라우터가 아닌 구성 요소 및 라우터의 동적 가져 오기에는 defineAsyncComponent 사용하십시오. 더 나은 UX를 위해 로딩 상태를 추가하고 번들러가 나머지를 수행하도록하십시오.

위 내용은 더 나은 성능을 위해 VUE의 Lazy Load 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!