Vue 3における遅延負荷成分

任意のWebアプリケーションを作成するときに高速読み込み速度が不可欠です.いくつかの余分な秒があなたのサイトを訪問しているユーザーの数に大きな影響を与える可能性があります.これは、高速サイトを持っているだけでなく、Googleの検索エンジンでは、ランキングのためだけでなく、ユーザーがウェブページと対話するために重要であることを意味します.
Vue 3は、AsyncコンポーネントAPIと新しいサスペンスコンポーネントへの改善を簡単にこれを達成するためにいくつかの新機能を導入しました.この記事では、私たちはあなたのページ負荷時間をスピードアップするためにVue 3でLaZying負荷成分を使用することを見ています.
この記事が作成されたYoutube動画をチェックアウトします.

この例のアプリでは、我々はSecretImage ユーザーが認証されるときだけVueロゴの対話型グラフィックを表示するコンポーネント.侵入者が我々の最も価値ある資産を見るのを防ぐために、我々はこのコンポーネントの可視性をトグルするボタンを加えました.

<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コードの量を増加させる多くの複雑なライブラリを使用しました.我々が我々のサイトに我々の最初の要請に積まれる大きなベンダーファイルをつくるのを見ることができる我々のアプリを構築すること.

非同期コンポーネント

私たちは新しいdefineAsynComponent Vue 3に付属する関数.我々がする必要があるのは、我々のコンポーネントをロードする関数を渡すことです.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 テンプレート内のコンポーネントとしてasync読み込みコンテンツを持つことができるコンポーネント.私たちがしなければならないのは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>

デフォルトのスロットは、非同期コンテンツが読み込まれたときに表示されます.
読書ありがとう!閉じるこの動画はお気に入りから削除されています.