Vue で遅延読み込みと非同期コンポーネント読み込みを実装する方法

Vue で遅延読み込みと非同期コンポーネント読み込みを実装する方法

遅延読み込み (または遅延読み込み) とは、ページの読み込み時ではなく、必要な場合にのみリソースを読み込むことを指します。すべてロードされています。これにより、初期読み込み時間が短縮され、ページのパフォーマンスとユーザー エクスペリエンスが向上します。 Vue フレームワークは遅延読み込み機能と非同期コンポーネント読み込みのサポートを提供するため、開発者は遅延読み込みと非同期コンポーネント読み込みを簡単に実装できます。

1. 遅延読み込みの実装

Vue では、非同期コンポーネントと Webpack のコード分割機能を使用して遅延読み込みを実装できます。具体的な手順は次のとおりです:

1. babel プラグインをインストールします

まず、動的導入 (インポート) 構文をサポートするために babel プラグインをインストールする必要があります。プロジェクトのルート ディレクトリで次のコマンドを実行します:

npm install @babel/plugin-syntax-dynamic-import -D

2. babel 構成の変更

次に、.babelrc ファイルを変更し、@babel を追加する必要があります。 /plugin -syntax-dynamic-importplugin。例:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

3. 動的インポート構文を使用する

遅延ロードする必要があるコンポーネントで動的インポート構文を使用します。たとえば、ルーティング設定ファイルで動的導入を使用して遅延読み込みを実装します。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  // 其他路由配置...
]

const router = new VueRouter({
  routes
})

export default router

上記のコードでは、webpackChunkName で import() 構文を使用します。遅延読み込みを実装するオプション。 webpackChunkName オプションは、生成されるチャンク ファイルの名前を指定するために使用されます。

2. 非同期コンポーネント読み込みの実装

非同期コンポーネント読み込みとは、ページの読み込み時にすべてのコンポーネントを一度に読み込むのではなく、必要なときにのみコンポーネントを読み込むことを意味します。 Vue フレームワークは、非同期コンポーネントの読み込みを実装するための Vue.component() メソッドと Vue 非同期コンポーネント を提供します。具体的な手順は次のとおりです:

1. 非同期コンポーネントを定義します

まず、非同期コンポーネントを定義する必要があります。例は次のとおりです。上記のコードでは、

Vue.component()

メソッドを使用し、コールバック関数を渡して非同期コンポーネントを定義します。コールバック関数内では、タイマーや非同期リクエストなどの非同期操作を使用できます。 2. 非同期コンポーネントを使用する

非同期コンポーネントを使用する必要がある場合は

タグを使用し、非同期を is にバインドします。属性 コンポーネントの名前。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Vue.component('my-component', (resolve, reject) =&gt; { setTimeout(() =&gt; { resolve({ template: '&lt;div&gt;This is an asynchronous component!&lt;/div&gt;' }) }, 1000) })</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、<component><p> タグを使用して、非同期コンポーネントを動的にレンダリングします。変数を <code>is プロパティにバインドすることで、非同期コンポーネントの名前を動的に選択できます。 概要:

遅延読み込みと非同期コンポーネント読み込みを使用すると、Vue プロジェクトにオンデマンド読み込みを実装でき、アプリケーションのパフォーマンスとユーザー エクスペリエンスが向上します。実際の開発では、プロジェクトのニーズに応じてこれらの機能を合理的に適用して、ページの読み込みをより効率的にすることができます。

参考資料:

Vue 公式ドキュメント: https://cn.vuejs.org/v2/guide/components-dynamic-async.html

• Webpack公式ドキュメント: https://webpack.js.org/guides/code-splitting

以上がVue で遅延読み込みと非同期コンポーネント読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。