Vue パフォーマンス最適化のための非同期コンポーネント

Vue では、コンポーネントが非常に大きい場合 (複雑なフォームなど)、アプリケーション全体のパフォーマンスが低下します。したがって、Vue アプリケーションを開発するときは、アプリケーションのパフォーマンスを向上させるために、オンデマンドでコンポーネントをロードする方法を考慮する必要があります。

Vue は非同期コンポーネントの機能を提供し、コンポーネントを小さな部分に分割し、必要に応じて動的にロードできるようにします。非同期コンポーネントの動作原理は、コンポーネントがレンダリングされる前に、まずコンポーネントに必要なコードを小さなブロックにパッケージ化し、次にコンポーネントを使用する必要があるときにその小さなブロックを動的にロードすることです。

1. 非同期コンポーネントの定義

Vue.js で非同期コンポーネントを定義する場合は、webpack提供されているimport()メソッドを使用する必要があります。import()メソッドを使用すると、実行時にコードを動的にロードできます。以下は、基本的な非同期コンポーネントの定義です。

Vue.component('MyComponent', () => import('./MyComponent.vue'));

注: 非同期コンポーネントの定義は、オブジェクトを返す関数である必要がありますPromise。

2. 非同期コンポーネントの使用

非同期コンポーネントを使用する場合は、通常のコンポーネントと同様に記述するだけで済みます。コンポーネントがレンダリングされると、Vue.js はコンポーネントが非同期コンポーネントであることを自動的に検出し、動的にロードします。以下は、基本的な非同期コンポーネントの使用法です。

<template>
  <div>
    <MyComponent />
  </div>
</template>

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

3. ブロッキング

アプリケーションに複数の非同期コンポーネントが含まれている場合、それらをさまざまな小さな部分にパッケージ化して、アプリケーションのパフォーマンスを向上させることができます。Webpack では、webpackChunkNameアノテーションを使用して非同期モジュールに名前を付けて、単一のファイルにパッケージ化できます。例えば：

Vue.component('MyComponent', () => import(/* webpackChunkName: "my-component" */ './MyComponent.vue'));

4. スケルトン画面

一部の比較的大きなコンポーネントでは、オンデマンド読み込みに非同期コンポーネントが使用されている場合でも、コンポーネントの読み込み時に空白期間が発生し、ユーザーに不快なエクスペリエンスをもたらします。

このとき、スケルトンスクリーンテクノロジーを使用して、ロードするコンテンツがロードされていることをユーザーに伝えるために、プレースホルダーを事前にレンダリングすることができます。以下は基本的なスケルトン画面の使用法です。

<template>
  <div>
    <template v-if="isLoading">
      <!-- 骨架屏代码 -->
    </template>
    <template v-else>
      <!-- 实际内容代码 -->
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    import('./MyComponent.vue').then(() => {
      this.isLoading = false
    })
  }
}
</script>

上記サンプルコードでは、isLoadingtrueの場合はスケルトン画面のコードが表示され、isLoadingfalseの場合は実際のコンテンツのコードが表示されます。

5. オンデマンドローディングの原理

Webpack では、非同期コンポーネントのオンデマンド読み込みは、import()Webpack が提供するメソッドとCode Splitting機能に依存します。コンポーネントが非同期コンポーネントとして定義されている場合、Webpack はコンポーネントをファイルに個別にパッケージ化し、メソッドを使用してimport()実行時に動的にロードします。webpackでパッケージ化されたコンポーネントはJavaScriptのモジュラーファイルなので、ツリーシェイク機構の採用やCDNによる高速化など、細かい最適化も可能です。

要約する

Vue 非同期コンポーネントは、特に大規模なシングルページアプリケーション (SPA) の場合、パフォーマンスを最適化する非常に便利な手段です。Webpack で非同期コンポーネントとスケルトン画面を構成することで、アプリケーションのパフォーマンスとユーザーエクスペリエンスを大幅に向上させることができます。