Vue テクノロジー開発でルートの遅延読み込みを実装する方法

Vue テクノロジ開発でルートの遅延ロードを実装する方法

Vue 開発では、ルートの遅延ロードはアプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させる重要なテクノロジです。ルートの遅延読み込みにより、アプリケーションの各ルーティング コンポーネントをオンデマンドで読み込むことができ、初期読み込み時間が短縮され、アプリケーションの応答速度が向上します。この記事では、Vue でルートの遅延読み込みを実装する方法と、具体的なコード例を詳しく紹介します。

1. ルーティングの遅延読み込みとは

ルーティングの遅延読み込みとは、Vue プロジェクトでルーティング コンポーネントをオンデマンドで読み込むテクノロジを指します。従来の開発では、すべてのコンポーネントが一度にロードされるため、アプリケーションのサイズが大きくなると、初期ロード時間が大幅に増加し、アプリケーションのユーザー エクスペリエンスに影響を与えます。ルートの遅延ロードでは、ルーティング要件に従ってコンポーネントを分割し、必要な場合にのみコンポーネントをロードできます。

2. ルートの遅延読み込みを実装する方法

以下は、ルートの遅延読み込みを実装するための具体的な段階的な方法です:

1. babel プラグイン

ルーティング遅延読み込みを使用する前に、babel プラグイン @babel/plugin-syntax-dynamic-import をインストールする必要があります。次のコマンドを使用してインストールできます:

npm install --save-dev @babel/plugin-syntax-dynamic-import

2. 設定ファイルを変更します

プロジェクト ルートで babel.config.js ファイルを見つけます。 @babel/preset-env設定の modules を false に変更し、プラグイン @babel/plugin-syntax を追加します-dynamic-import の構成は次のとおりです。

module.exports = {
  presets: [
    '@babel/preset-env'
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
}

3. ルーティング構成の変更

Vue のルーティング構成ファイル (通常は router/index. js)、追加 独自のコンポーネント導入方法を遅延読み込みに変更します。例を次に示します。

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({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上記のコードでは、component 属性の値がアロー関数に変更され、import(/* webpackChunkName: "name" * / ' ../path/to/component.vue') コンポーネントをオンデマンドでロードするための構文。このうち、name と path/to/component.vue はコンポーネントの名前と router/index.js からの相対パスです。

4. プロジェクトを再構築する

上記の手順を完了した後、プロジェクトを再構築します。ブラウザの開発者ツールで、各ルーティング コンポーネントが独立したファイルを生成することがわかります。必要な場合にのみロードされます。

これまでのところ、Vue でルートの遅延読み込みを正常に実装できました。

概要

ルーティングの遅延読み込みは、Vue 開発における重要なテクノロジです。ルーティング コンポーネントをオンデマンドで読み込むことで、アプリケーションのパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。この記事では、ルートの遅延読み込みを実装する手順を詳しく説明し、具体的なコード例を示します。この記事がルーティング遅延読み込みの理解と使用に役立つことを願っています。

以上がVue テクノロジー開発でルートの遅延読み込みを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。