Vue3.0+vite2は動的非同期コンポーネントの遅延読み込みを実装します

Viteプロジェクトを作成する

パフォーマンスが成功か失敗かを決定します。Vite は確かに高速です。
cmd コマンドライン (デフォルトで node と npm がすでにインストールされています) で、npm init @vitejs/app vue-study – --template vue; を実行します。
vue-study に cd し、npm install (依存関係をインストール)、npm run dev (プロジェクトを開始) を実行します。

コンポーネントの作成

pages という新しいディレクトリを作成し、pages の下に、contents という新しいディレクトリを作成します。contents の下に、特定のコンポーネントディレクトリ page を作成できます。この時点で、ディレクトリ構造は次のようになります。

アプリ.vue

<テンプレート>
 <p @click="onChangeContents('./pages/contents/gp/gp.vue')">郭 ペイ</p>
 <p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">システムパラメータ</p>
 <p>{{currentTabComponent}}</p>
 <!-- <サスペンス> -->
 <コンポーネント:is="DefineAsyncComponent({
     //ファクトリー関数ローダー: Modeuls[currentTabComponent],
     // // デフォルト値: 無限大 (つまりタイムアウトなし、単位: ミリ秒)
     タイムアウト: 3000、
    })"></コンポーネント>
 <!-- </サスペンス> -->
</テンプレート>
<script lang="ts">
 輸入 {
  定義コンポーネント、
  非同期コンポーネントの定義、
  反応的、
  参照
 } から 'vue'
 エクスポートデフォルトdefineComponent({
  名前: 'アプリ'、
  設定（） {
   //vite は指定されたパスのすべてのモジュールをロードします const Modeuls = import.meta.glob('./pages/contents/*/*');
   const onChangeContents = function(URL) {
    currentTabComponent.value = URL;
    コンソールログ(現在のタブコンポーネント)
   }
   currentTabComponent を ref('./pages/contents/systemManges/xtcs.vue') とします。
   非同期コンポーネントを定義します。
   戻る {
    非同期コンポーネントの定義、
    現在のタブコンポーネント、
    コンテンツの変更時、
    モデル
   }
  },
 })
</スクリプト>

これで、vue3.0+vite2 で動的非同期コンポーネント遅延読み込みを実装する方法についての説明は終わりです。vue3.0+vite2 の動的非同期遅延読み込みに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: